The parent div in my code contains a child span element. I then created a new div and appended a child span to it. Surprisingly, when I attempted to add the span to its parent

Question

The parent div in my code contains a child span element. I then created a new div and appended a child span to it. Surprisingly, when I attempted to add the span to its parent

ist

Answer 1

Answer №1

The issue arises from the fact that placedOnAnswer and placedOnQuestion are declared as global variables. This leads to persistence of their values between different function calls, causing unwanted behavior when clicking on answers and questions in succession.

To address this problem, it's recommended to make these variables local to the function so that they are reset with each call, ensuring no carryover of previous states.

var spn = document.querySelectorAll("span");
var question = document.querySelectorAll(".question");
var answer = document.querySelectorAll(".answer");

function onspanclick() {
  var placedOnAnswer;
  var placedOnQuestion;

  for (var i = 0; i < answer.length; i++) {
    if (answer[i].id == this.parentElement.id) {
      placedOnAnswer = true;
      break;
    }
  }
  for (var i = 0; i < question.length; i++) {
    if (question[i].id == this.parentElement.id) {
      placedOnQuestion = true;
      break;
    }
  }

  if (placedOnAnswer == true) {
    for (var i = 0; i < question.length; i++) {
      if (question[i].childElementCount == 0) {
        question[i].appendChild(document.getElementById(this.id));
        console.log("answer not working");
        break;
      }
    }
  }
  if (placedOnQuestion == true) {
    for (var i = 0; i < answer.length; i++) {
      if (answer[i].childElementCount == 0) {
        answer[i].appendChild(document.getElementById(this.id));
        break;
      }
    }
  }
}

for (var i = 0; i < spn.length; i++) {
  spn[i].addEventListener("click", onspanclick);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* CSS styles removed for brevity */

<body>
  <div class="container">
    /* HTML elements omitted for conciseness */
  </div>
</body>

Answer 2

The issue arises from the fact that placedOnAnswer and placedOnQuestion are declared as global variables. This leads to persistence of their values between different function calls, causing unwanted behavior when clicking on answers and questions in succession.

To address this problem, it's recommended to make these variables local to the function so that they are reset with each call, ensuring no carryover of previous states.

var spn = document.querySelectorAll("span");
var question = document.querySelectorAll(".question");
var answer = document.querySelectorAll(".answer");

function onspanclick() {
  var placedOnAnswer;
  var placedOnQuestion;

  for (var i = 0; i < answer.length; i++) {
    if (answer[i].id == this.parentElement.id) {
      placedOnAnswer = true;
      break;
    }
  }
  for (var i = 0; i < question.length; i++) {
    if (question[i].id == this.parentElement.id) {
      placedOnQuestion = true;
      break;
    }
  }

  if (placedOnAnswer == true) {
    for (var i = 0; i < question.length; i++) {
      if (question[i].childElementCount == 0) {
        question[i].appendChild(document.getElementById(this.id));
        console.log("answer not working");
        break;
      }
    }
  }
  if (placedOnQuestion == true) {
    for (var i = 0; i < answer.length; i++) {
      if (answer[i].childElementCount == 0) {
        answer[i].appendChild(document.getElementById(this.id));
        break;
      }
    }
  }
}

for (var i = 0; i < spn.length; i++) {
  spn[i].addEventListener("click", onspanclick);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* CSS styles removed for brevity */

<body>
  <div class="container">
    /* HTML elements omitted for conciseness */
  </div>
</body>

Answer 3

Answer №2

My mistake in logic was that when I clicked on the question div, the span would shift to the answer and I set placedOnQuestion = true.

for (var i = 0; i < question.length; i++) {
    if (question[i].id == this.parentElement.id) {
      placedOnQuestion = true;
      break;
    }
  }
if (placedOnQuestion == true) {
    for (var i = 0; i < answer.length; i++) {
      if (answer[i].childElementCount == 0) {
        answer[i].appendChild(document.getElementById(this.id));
        break;
      }
    }
  }

Subsequently, when I clicked on the span now located in the answer div, I set placedOnAnswer = true. At this point, both placedOnAnswer and placedOnQuestion are true.

for (var i = 0; i < answer.length; i++) {
    if (answer[i].id == this.parentElement.id) {
      placedOnAnswer = true;
      break;
    }
  }

Upon clicking again on the span, it appends to the answer div. Following that, there is a condition where it checks for placedonQuestion being true and places the span back on the answer div. Both conditions are met, resulting in the element being placed where it was before.

if (placedOnAnswer == true) {
    for (var i = 0; i < question.length; i++) {
      if (question[i].childElementCount == 0) {
        question[i].appendChild(document.getElementById(this.id));
        console.log("answer not working");
        break;
      }
    }
  }
  if (placedOnQuestion == true) {
    for (var i = 0; i < answer.length; i++) {
      if (answer[i].childElementCount == 0) {
        answer[i].appendChild(document.getElementById(this.id));
        break;
      }
    }
  }

To resolve this error, I adjusted the JavaScript code by setting placedonAnswer= true and placedonQuestion= false. Both variables should never be true at the same time. I appreciate the help from those on stack overflow who provided answers to my questions as I continue learning from them.

for (var i = 0; i < answer.length; i++) {
                if (answer[i].id == this.parentElement.id) {
                    placedOnAnswer = true;
                    placedOnQuestion = false;
                    break;
                }
            }
            

            for (var i = 0; i < question.length; i++) {
                if (question[i].id == this.parentElement.id) {
                    placedOnQuestion = true;
                    placedOnAnswer = false;
                    break;
                }
            }

I am grateful for the assistance from everyone on stack overflow who contributed to resolving my issue. Your answers have helped me learn and improve.

Answer 4

My mistake in logic was that when I clicked on the question div, the span would shift to the answer and I set placedOnQuestion = true.

for (var i = 0; i < question.length; i++) {
    if (question[i].id == this.parentElement.id) {
      placedOnQuestion = true;
      break;
    }
  }
if (placedOnQuestion == true) {
    for (var i = 0; i < answer.length; i++) {
      if (answer[i].childElementCount == 0) {
        answer[i].appendChild(document.getElementById(this.id));
        break;
      }
    }
  }

Subsequently, when I clicked on the span now located in the answer div, I set placedOnAnswer = true. At this point, both placedOnAnswer and placedOnQuestion are true.

for (var i = 0; i < answer.length; i++) {
    if (answer[i].id == this.parentElement.id) {
      placedOnAnswer = true;
      break;
    }
  }

Upon clicking again on the span, it appends to the answer div. Following that, there is a condition where it checks for placedonQuestion being true and places the span back on the answer div. Both conditions are met, resulting in the element being placed where it was before.

if (placedOnAnswer == true) {
    for (var i = 0; i < question.length; i++) {
      if (question[i].childElementCount == 0) {
        question[i].appendChild(document.getElementById(this.id));
        console.log("answer not working");
        break;
      }
    }
  }
  if (placedOnQuestion == true) {
    for (var i = 0; i < answer.length; i++) {
      if (answer[i].childElementCount == 0) {
        answer[i].appendChild(document.getElementById(this.id));
        break;
      }
    }
  }

To resolve this error, I adjusted the JavaScript code by setting placedonAnswer= true and placedonQuestion= false. Both variables should never be true at the same time. I appreciate the help from those on stack overflow who provided answers to my questions as I continue learning from them.

for (var i = 0; i < answer.length; i++) {
                if (answer[i].id == this.parentElement.id) {
                    placedOnAnswer = true;
                    placedOnQuestion = false;
                    break;
                }
            }
            

            for (var i = 0; i < question.length; i++) {
                if (question[i].id == this.parentElement.id) {
                    placedOnQuestion = true;
                    placedOnAnswer = false;
                    break;
                }
            }

I am grateful for the assistance from everyone on stack overflow who contributed to resolving my issue. Your answers have helped me learn and improve.

The parent div in my code contains a child span element. I then created a new div and appended a child span to it. Surprisingly, when I attempted to add the span to its parent

Answer №1

Answer №2

Similar questions

Align text vertically within labels and links styled with bootstrap

Which data types in JavaScript have a built-in toString() method?

Exploring the Jquery functionality: $(document).ready(callback);

How can I update an Angular Datatable to display new JSON data?

Looking for guidance and bug assistance in HTML and JS, possibly involving PHP and MySQL. Can anyone offer advice?

The JS copy function is successful when operating on a single element, but it encounters issues when attempting to run on multiple elements, only copying

Is it necessary for every single product to have its very own webpage?

What is the best way to transfer a data string from my HTML document to my server (using either Node or Express) and trigger a specific function with that data?

Using Angular 4: Redirecting Menu to Component with Electron

"Need help with displaying dates in a Material-UI table in ReactJS? Learn how to easily convert a date object to

Issue encountered when attempting to update a specific element within an array using Mongoose

Confused about the concept of an SWR subscription

Can Javascript (PWA) be used to detect fake GPS or mock GPS in applications?

What happens when tabs are dynamically added on keypress?

Chrome browser experiencing a disappearing vertical scroll bar issue on a Bootstrap Tab

Unleashing the Potential: Integrating a Scanner Device with

Fade out a dynamically loaded content block using jQuery

Is there a way to use Protractor to test ASP.NET WebForms (not Angular)?

Access your account using Google authentication within an Angular framework

Insert a clickable element within an HTML document