I have parent div with span child. I append a child span to new div . However when I try to add span-CodePudding

I have four divs having a class name question.
Every question div is having a span as its child element.
I have four divs having a class name answer
Now on click on the span I call appendchild() to append the span whose parent is question now . On appendchild() the span parent becomes answer div.
Now the span is appended in the Answer div.
In span when I click whose parent is now answer div. I want to append the span back to its previous question div. But when I call appendchild() it does not append . It shows no error .

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

function onspanclick() {
  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;
}

.answer {
  width: 100px;
  height: 50px;
  border: 2px dotted #686868;
  border-radius: 10px;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  margin: 10px;
}

.line {
  height: 3px;
  border: 2px solid #686868;
  margin-top: 30px;
  margin-bottom: 30px;
}

.question {
  width: 100px;
  height: 50px;
  border: 2px dotted #686868;
  border-radius: 10px;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  margin: 10px;
}

span {
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.btn {
  display: block;
  padding: 10px 20px;
  color: #686868;
  border: 2px solid #686868;
  font-size: 1.2em;
  line-height: 1.7;
  transition: 0.3s;
  background: white;
  width: 5%;
  margin: 40px auto;
}

.btn:hover {
  color: white;
  background: #686868;
  transition: 0.3s;
}

<body>
  <div >
    <div  id="a1"></div>
    <div  id="a2"></div>
    <div  id="a3"></div>
    <div  id="a4"></div>
  </div>

  <div ></div>
  <div  id="q1"><span id="s1">ist</span></div>
  <div  id="q2"><span id="s2">wie</span></div>
  <div  id="q3"><span id="s3">name</span></div>
  <div  id="q4"><span id="s4">ihr</span></div>

  <button >submit</button>

</body>
```

CodePudding user response：

The problem is that placedOnAnswer and placedOnQuestion are global variables. So if you click on an answer and then click on a question, placedOnAnswer will still be true during the second click.

Make them local to the function so the values don't persist between calls.

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;
}

.answer {
  width: 100px;
  height: 50px;
  border: 2px dotted #686868;
  border-radius: 10px;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  margin: 10px;
}

.line {
  height: 3px;
  border: 2px solid #686868;
  margin-top: 30px;
  margin-bottom: 30px;
}

.question {
  width: 100px;
  height: 50px;
  border: 2px dotted #686868;
  border-radius: 10px;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  margin: 10px;
}

span {
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.btn {
  display: block;
  padding: 10px 20px;
  color: #686868;
  border: 2px solid #686868;
  font-size: 1.2em;
  line-height: 1.7;
  transition: 0.3s;
  background: white;
  width: 5%;
  margin: 40px auto;
}

.btn:hover {
  color: white;
  background: #686868;
  transition: 0.3s;
}

<body>
  <div >
    <div  id="a1"></div>
    <div  id="a2"></div>
    <div  id="a3"></div>
    <div  id="a4"></div>
  </div>

  <div ></div>
  <div  id="q1"><span id="s1">ist</span></div>
  <div  id="q2"><span id="s2">wie</span></div>
  <div  id="q3"><span id="s3">name</span></div>
  <div  id="q4"><span id="s4">ihr</span></div>

  <button >submit</button>

</body>
```

CodePudding user response：

The mistake I did in logic is that when I click on question div the span is shifting to answer and I made 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;
      }
    }
  }

After that when I clicked the span which is now on the answer div I made placedOnAnswer = true. Now both placedOnAnswer and placedOnQuestion is true.

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

When I clicked once more on the span it appends it on the answer div following that I have a condition where it again checks for placedonQuestion being true and it places the span on the answer div. here it satisfies both the condition and the element was 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;
      }
    }
  }

I fixed this error by placing this in javascript by placing placedonAnswer= true and placedonQuestion= false. Both should never be true at same time. thanks for putting effort

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;
                }
            }

thanks for the effort all the people who put in stack overflow. I get answers of my question and I am learning from it.