如何获取div中特定元素点击时的值？

Question

我在做一个搜索引擎程序。人们可以提出问题，它将被列在不同的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()"> &times; </button>
    </span>
    <button onmouseover="list()"> &#9776; </button>
</div>

<div class="ans">
    <span id="ansDisplay">
        <center><b><u> LIST OF ANSWERS</u></b></center>
        <button id="closeans" onmouseover="closeans()"> &times; </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()"> &times; </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)

Answer 1

我去掉了不必要的东西来回答问题。收集答案 的问题作为参数。要做到这一点，您可以使用 束缚 方法。

由于你在添加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>