Javascript增量变量更新表单元格onclick

我有一个页面，用户输入一个颜色，我调用onClick方法来改变表格的单个单元格的颜色。但是，当我单击任何单元格时，只有最后一个单元格（本例中为单元格3）将更改颜色。我究竟做错了什么？Javascript增量变量更新表单元格onclick

我得到的错误：

Message: 'document.getElementById(...)' is null or not an object
Line: 24
Char: 4
Code: 0

我的代码是：

所有的

<html> 

    <body> 
    <input type='text' id='userInput' value='yellow' /> 

    <table border="1"> 
     <tr> 
      <td id="1">cell1 
      </td> 
     </tr> 
     <tr> 
      <td id="2">cell2 
      </td> 
     </tr> 
     <tr> 
      <td id="3">cell3 
      </td> 
     </tr> 

    </table> 

    <script type="text/javascript"> 
    for(var i = 1; i <= 3; i++){ 
     document.getElementById(i).onclick = function(){ 
     var newColor = document.getElementById('userInput').value; 
      document.getElementById(i).style.backgroundColor = newColor; 
     } 
    } 
    </script> 
    </body> 

    </html>

来源

2012-09-20 bernlim

'为（var i = 0; i <= 3; i ++）{' – Dev

更改您的HTML这样的：一个ID必须以一个字母字符。以数字开头无效。

<table border="1"> 
    <tr> 
     <td id="td1">cell1 
     </td> 
    </tr> 
    <tr> 
     <td id="td2">cell2 
     </td> 
    </tr> 
    <tr> 
     <td id="td3">cell3 
     </td> 
    </tr> 

</table>

这是一个很常见的JavaScript的问题：所有的代码共享的i的值，它是3在循环的结束。你可以使用像这样的另一个辅助函数来解决它：

function changeIt(i) { 
    // This inner function now has its own private copy of 'i' 
    return function() { 
    var newColor = document.getElementById('userInput').value; 
     document.getElementById("td" + i).style.backgroundColor = newColor; 
    } 
} 

for(var i = 1; i <= 3; i++){ 
    document.getElementById(i).onclick = changeIt(i); 
}

它也可以使用匿名函数编写，但这些都很难阅读。

来源

2012-09-20 08:26:11

我正要upvote，但你的代码没有解决问题，你必须替换'document.getElementById（i）.onclick = function（）{changeIt（i）; }'with'document.getElementById（i）.onclick = changeIt（i）;' –

变量范围和字母字符ID的好处。不过，我宁愿使用'this'。 –

这工作对我来说，谢谢埃里克的提示以及 – bernlim

首先，你的循环是错误的。尝试：

for(var i = 1; i <= 3; i++) { 
    //code 
}

其次，不是检索您的每一次循环中的元素，你可以使用this：

this.style.backgroundColor = document.getElementById('userInput').value;

来源

2012-09-20 08:17:22

已编辑，但不起作用。现在没有任何单元格变色了 – bernlim

已更新为使用'this'关键字，这会使您的代码正常工作。而且，就像Jeremy指出的那样，你不应该用数字来启动一个元素id。 –

杰里米的答案是接近，但仍有不被调用，直到元素被点击，此时i的值仍是三个说的changeit问题。使用杰里米的更新到HTML正确的脚本可以写成...

function createChangeColorHandler(n) { 
    return function() { 
    var newColor = document.getElementById('userInput').value; 
    document.getElementById("td" + n).style.backgroundColor = newColor; 
    } 
} 

for(var i = 1; i <= 3; i++) { 
    // We pass i to the function createChangeColorHandler by value 
    // at the time of this pass of the loop rather than referencing 
    // the variable directly after the loop has finished 
    document.getElementById(i).onclick = createChangeColorHandler(i); 
}

作为一个匿名函数...

for(var i = 1; i <= 3; i++) { 
    // We pass i to the function createChangeColorHandler by value 
    // at the time of this pass of the loop rather than referencing 
    // the variable directly after the loop has finished 
    document.getElementById(i).onclick = (function(n) { 
    return function() { 
     var newColor = document.getElementById('userInput').value; 
     document.getElementById("td" + n).style.backgroundColor = newColor; 
    } 
    })(i); 
}

编辑杰里米的答案现在是正确的

来源

2012-09-20 08:44:08

+1包含anon函数版本。 –

Javascript增量变量更新表单元格onclick

回答

相关问题