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

我对下面的代码有问题。这里有 4 个可见元素：2 个表格单元格和 2 个输入文本框。最后一个输入文本框显示单击的前 3 个元素(2 个单元格和第一个输入框(中任何一个元素的名称。单击前 3 个元素中的任何一个都将使用 "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 中具有名称属性？

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变量，所以你不会成为隐式全局的恐怖的牺牲品[这是我贫血的小博客上的一篇文章]。

但是，如果要在元素上放置非标准属性，请使用data-前缀：

<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>

用户交互元素只有默认的名称属性，如input,select,button。td不必 that.so 通过 dom 中的getAttribute()函数获取名称

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

<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 />

相关内容

最新更新

热门标签：