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 class="container"> <div class="answer" id="a1"></div> <div class="answer" id="a2"></div> <div class="answer" id="a3"></div> <div class="answer" id="a4"></div> </div> <div class="line"></div> <div class="question" id="q1"><span id="s1">ist</span></div> <div class="question" id="q2"><span id="s2">wie</span></div> <div class="question" id="q3"><span id="s3">name</span></div> <div class="question" id="q4"><span id="s4">ihr</span></div> <button class="btn">submit</button> </body> ```
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 class="container"> <div class="answer" id="a1"></div> <div class="answer" id="a2"></div> <div class="answer" id="a3"></div> <div class="answer" id="a4"></div> </div> <div class="line"></div> <div class="question" id="q1"><span id="s1">ist</span></div> <div class="question" id="q2"><span id="s2">wie</span></div> <div class="question" id="q3"><span id="s3">name</span></div> <div class="question" id="q4"><span id="s4">ihr</span></div> <button class="btn">submit</button> </body> ```
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;
}
}
}
for (var i = 0; i < answer.length; i++) {
if (answer[i].id == this.parentElement.id) {
placedOnAnswer = 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 < 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.