如何获取div中特定元素点击时的值？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何获取div中特定元素点击时的值？相关的知识，希望对你有一定的参考价值。
我在做一个搜索引擎程序。人们可以提出问题，它将被列在不同的div中。然后人们可以点击列出的一个问题来回答它，答案（和那个特定的问题）将被列在另一个div中。
但我的代码只显示在答案列表中输入的最后一个问题。因此，如果有3个问题，并且用户回答了第一个问题，预期的输出是。
Question 1?
Ans: Answer 1
但实际输出是：
Question 3?
Ans: Answer 1
function separate()
{
var question = document.createElement("p");
question.innerhtml = document.getElementById("qInput").value;
document.getElementById("stackDisplay").appendChild(question);
question.addEventListener("click", answerBox);
}
function answerBox(ques)
{
document.getElementById("answerBox").style.display = "block";
}
var i =1;
function collectAns() {
if(event.key === 'Enter') {
var quest = document.getElementById("qInput").value;
var ans = document.getElementById("ansSpace").value;
document.getElementById("ansDisplay").innerHTML += i+") "+quest+"<br> Ans: "+ans+"<br><br>";
document.getElementById("answerBox").style.display = "none";
i+=1;
}
}<div class="search">
<input type="text" placeholder="Search.." name="search" id="qInput">
<button type="submit" onclick="separate()">
<i class="fa fa-search"></i>
</button>
</div>
<div class="stack">
<span id="stackDisplay">
<center><b><u> LIST OF QUESTIONS</u></b></center>
<button id="close" onmouseover="clo()"> × </button>
</span>
<button onmouseover="list()"> ☰ </button>
</div>
<div class="ans">
<span id="ansDisplay">
<center><b><u> LIST OF ANSWERS</u></b></center>
<button id="closeans" onmouseover="closeans()"> × </button>
</span>
<button onmouseover="listans()">
<i class="fa fa-commenting-o"></i>
</button>
</div>
<div id="answerBox">
<center><b> Write your answer:</b></center>
<button id="closeans" onmouseover="closeansbox()"> × </button>
<textarea id="ansSpace" placeholder="Your answer here..." onkeydown="collectAns()"></textarea>
</div>我知道这是因为 var quest = document.getElementById("qInput").value; 所以它只需要最后一个问题，但我不知道该写什么来代替这个。
我试着添加 question.addEventListener("click", function(){collectAns(ques)}); 在 separate() 但它打印 undefined 而不是问题。
我试着添加 var q = document.getElementById("stackDisplay").children; 在 collectAns() 但我不知道他们会点击哪个问题，所以我不能给出索引，所以我写道 q[this] 打印时，它仍然给出了 undefined.
我应该怎么做才能让它显示问题？(尽可能不用jquery或php，只用html、css、javascript)
我去掉了不必要的东西来回答问题。收集答案 的问题作为参数。要做到这一点，您可以使用 束缚 方法。
由于你在添加eventListners，你需要删除旧的，以防止它们也被执行。删除旧的困难在于你不知道它们的名字，它们是匿名的，因为使用了bind。你可以将它们存储在一个数组中，但更简单的是克隆节点，它不会克隆附着在它上面的eventlistners。
function separate() {
var question = document.createElement("li");
question.innerHTML = document.getElementById("qInput").value;
document.getElementById("stackDisplay").appendChild(question);
question.addEventListener("click", answerBox);
}
function answerBox() {
const answerbox = document.getElementById("answerBox");
const question = this.innerText;
answerbox.querySelector('.ques').innerText = question;
// find textarea, clone it and remove it
// this is to remove any eventListener from it.
const textarea = answerbox.querySelector('textarea');
const new_textarea = textarea.cloneNode();
textarea.remove();
// add new eventListner with question as parameter
new_textarea.addEventListener('keydown', collectAns.bind(null, this.innerText));
answerbox.appendChild(new_textarea);
// display answer box
answerbox.style.display = "block";
}
var i = 1;
function collectAns(ques) {
if (event.key === 'Enter') {
var ans = document.getElementById("ansSpace").value;
document.getElementById("ansDisplay").innerHTML += i + ") " + ques + "<br> Ans: " + ans + "<br><br>";
document.getElementById("answerBox").style.display = "none";
i += 1;
}
}<div class="search">
<input type="text" placeholder="Question.." name="search" id="qInput">
<button type="submit" onclick="separate()">
add
</button>
</div>
<h4>LIST OF QUESTIONS:</h4>
<ul id="stackDisplay"></ul>
<h4>LIST OF ANSWERS</h4>
<ul id="ansDisplay"></ul>
<div id="answerBox">
<div>Write your answer to question "<span class="ques"></span>":</div>
<textarea id="ansSpace" placeholder="Your answer here..."></textarea>
</div>以上是关于如何获取div中特定元素点击时的值？的主要内容，如果未能解决你的问题，请参考以下文章