Question

我的服务器上有一个密码保险库，用于我们内部网上的特殊页面工作，但是我在通过edit()函数将ID传递到我的脚本时遇到了问题。以下是适用的标记（您可以看到它包含在PHP数组中。包括id在内的所有内容都正确提供（即源代码中的ID将显示为n1或p7等......））：

<tr id='$OTHERInfo[0]'>
<td id='n$OTHERInfo[0]' onclick='edit(this)' contentEditable='false'>$OTHERInfo[1]</td>
<td id='u$OTHERInfo[0]' onclick='edit(this)' contentEditable='false'>$OTHERInfo[2]</td>
<td id='p$OTHERInfo[0]' onclick='edit(this)' contentEditable='false'>$OTHERInfo[3]</td>
<td id='d$OTHERInfo[0]' onclick='edit(this)' contentEditable='false'>$OTHERInfo[4]</td></tr>

这是脚本......它非常简单（它包含在文档的底部）：

<script>
function edit(id){
document.getElementById(id).style.backgroundColor = "white";
document.getElementById(id).style.color = "black";
document.getElementById(id).setAttribute("contentEditable", "true");
} 
</script>

在控制台中，错误消息显示为：

Uncaught TypeError: Cannot read property 'style' of null

很明显，ID没有正确传递，但我不知道该怎么做。我也试过尝试“硬编码”＃34; onclick中函数的ID如下：edit(n$OTHERInfo[0])但我遇到同样的问题。

Answer 1

'this'是整个<td>元素，而不仅仅是其ID，因此您的脚本应为：

<script>
function edit(element){
    element.style.backgroundColor = "white";
    element.style.color = "black";
    element.setAttribute("contentEditable", "true");
} 
</script>

Answer 2

id函数的

edit是对点击元素的引用

onclick='edit(this.id)'

或

function edit(id){
  id.style.backgroundColor = "white";
  id.style.color = "black";
  id.setAttribute("contentEditable", "true");
}

Answer 3

您正在提供edit(this)。关键字this引用实际元素。它没有引用元素的ID。您可以在不document.getElementById的情况下修改代码。

function edit(element) {
    element.style.backgroundColor = "white";
    element.style.color = "black";
    element.setAttribute("contentEditable", "true");
}

Answer 4

<td id='n$OTHERInfo[0]' onclick='edit(this)' contentEditable='false'>$OTHERInfo[1]</td>

如果您将this传递给edit函数，您将使用整个元素（即<td>元素）作为参数而不是其id。

您可以尝试onclick='edit(this.id)'。这将为您提供<td>元素的id作为参数。

我没有通过函数调用JavaScript传递

4 个答案: