gpt4 book ai didi

javascript - 为什么我的代码中未定义单元格名称属性

转载 作者:行者123 更新时间:2023-11-28 17:50:54 28 4
gpt4 key购买 nike

我对下面的代码有疑问。这里有 4 个可见元素:2 个表格单元格和 2 个输入文本框。最后一个输入文本框显示前 3 个单击元素(2 个单元格和第一个输入框)中任意一个的名称。前 3 个元素中任何一个的 Onclick 都会使用“this”参数 (now(this)) 调用 now() 函数。now 函数然后将单击的元素的名称分配给 elemName 变量,将单击的元素的背景更改为蓝色,并将最后一个文本框的值分配给元素名称。为什么点击任何人时单元格名称总是未定义?复制并尝试该代码。我需要答案。

<html>

<head>
<script>
function now(elementa){
elemName=elementa.name;
elementa.style.backgroundColor = 'blue';
document.getElementById("clickedElementName").value=elementa.name;
} //end of now() function
</script>
</head>

<body>
<table border="1" >
<td name="cell1" onclick="now(this)">cell 1</td>
<td name="cell2" onclick="now(this)">cell 2</td>
</table><br>

<input value=mdfkjkjei name="input" onclick="now(this)" type=text />
<br><br>

clicked elements name:<input id="clickedElementName" type=text />
</body>
</html>

当单击单元格时,最后一个输入文本框应该显示其html名称属性,但它显示未定义。但是当我单击第一个输入文本框时,它会显示其名称(输入)。为什么表格单元格的名称未定义。html 中表格单元格不允许有 name 属性吗?

最佳答案

td 元素没有 name 属性,因此它们没有 name 反射属性。如果您使用 name 属性(无效),您可以通过 getAttribute("name") 获取其值:

function now(elementa) {
var elemName = elementa.getAttribute("name"); // ***
elementa.style.backgroundColor = 'blue';
document.getElementById("clickedElementName").value = elemName; // ***
} //end of now() function

<html>

<head>
<script>
function now(elementa) {
var elemName = elementa.getAttribute("name");
elementa.style.backgroundColor = 'blue';
document.getElementById("clickedElementName").value = elemName;
} //end of now() function
</script>
</head>

<body>
<table border="1">
<td name="cell1" onclick="now(this)">cell 1</td>
<td name="cell2" onclick="now(this)">cell 2</td>
</table><br>

<input value=mdfkjkjei name="input" onclick="now(this)" type=text />
<br><br> clicked elements name:<input id="clickedElementName" type=text />
</body>

</html>

(另请注意,我声明了 elemName 变量,这样您就不会成为 The Horror of Implicit Globals [这是我贫乏的小博客上的一篇文章]的牺牲品。)

但是,如果您要在元素上添加非标准属性,请使用 data- prefix :

<td data-name="cell1" ..>
function now(elementa) {
var elemName = elementa.getAttribute("data-name"); // ***
elementa.style.backgroundColor = 'blue';
document.getElementById("clickedElementName").value = elemName;
} //end of now() function

<html>

<head>
<script>
function now(elementa) {
var elemName = elementa.getAttribute("data-name"); // ***
elementa.style.backgroundColor = 'blue';
document.getElementById("clickedElementName").value = elemName;
} //end of now() function
</script>
</head>

<body>
<table border="1">
<td data-name="cell1" onclick="now(this)">cell 1</td>
<td data-name="cell2" onclick="now(this)">cell 2</td>
</table><br>

<input value=mdfkjkjei name="input" onclick="now(this)" type=text />
<br><br> clicked elements name:<input id="clickedElementName" type=text />
</body>

</html>

关于javascript - 为什么我的代码中未定义单元格名称属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45542979/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com