Question

我通过制作一个简单的问答游戏，第一次尝试使用Javascript并与DOM进行交互。我的所有元素都是由JS动态生成的，除了几个div。

所以这是我的问题。

我有

问题1。
（一个）
（B）
（C）
（d）

我希望能够点击任何答案并返回值。为此，我编写了函数

function checkCorrectness(element){
    element.onclick = function(){       
        nodes = element.childNodes
        for(i = 0; i<nodes.length; i++){
            nodes[i].onclick = function(){console.log(nodes)};
        }
    }
 }
//Note answers selectsthe div containing the 4 <p> elements A,B,C,D
checkCorrectness(answers)

正如预期的那样，它返回了包含我的答案的四个

元素的数组。因此，我认为逻辑下一步是通过console.log-ing nodes [i]而不是节点来更改它，从而选择特定节点onClick。我希望这会给我返回我点击的元素，所以我可以将其内部HTML与正确答案进行比较，从而看出它是否是正确的答案。

function checkCorrectness(element){
    element.onclick = function(){       
        nodes = element.childNodes
        for(i = 0; i<nodes.length; i++){
            nodes[i].onclick = function(){console.log(nodes[i])};
        }
    }
 }

 checkCorrectness(answers)

然而，它只返回undefined。任何帮助将不胜感激！

Answer 1

啊，你发现了JavaScript闭包（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures）。对于那些刚接触JS的人来说，这是一个非常常见的错误，所以不要感到难过。当您记录nodes[i]时，您实际上正在索引的nodes访问最新值＆＃34; i＆＃34;在函数执行时。在这种情况下，哪个是nodes.length，这是未定义的...对不起，如果这没有意义，但请查看链接的文章。

你真的想要这样的东西：

var logNode = function(val) {
    return function() { console.log(nodes[val]) };
};

for(i = 0; i<nodes.length; i++){
    nodes[i].onclick = logNode(i);
}

Answer 2

你的测验的整个逻辑可以写成几行

// JavaScript
window.onload = function(){
  // This is a simple structure to hold your question_id and the correct answer
  // var data = {'10':'B', '11':'D', '12':'A', '13':'A'}; ...
  // for this exampple we'll have only one
  var data = {'10':'B'};  
  var li = document.getElementsByTagName('UL')[0].children;
  for(i = 0; i < li.length; i++){
    li[i].onclick = function(){
      if(data[this.parentNode.id] == this.innerHTML){
        alert(this.innerHTML + " -> Correct"); 
      }else{
        alert('Nope!');
      }
    };
  }
};

// HTML
// Let's say every question has an `id` 
// I'd use a list for this case but you may use any other markup 
<ul id="10">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>

工作jsBin

麻烦返回点击元素Javascript的值

2 个答案: