如何获取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()"> &times; </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()"> &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)

解决方案:

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

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

给TA打赏
共{{data.count}}人
人已打赏
解决方案

Javascript:正确地将日期字符串转换为日期对象

2022-4-20 16:09:08

解决方案

WPF闪屏UI不更新

2022-4-20 17:08:52

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索