Question

我的代码存在问题。这里有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中具有name属性？

Answer 1

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

＆＃13;

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

＆＃13;

（另请注意，我宣布了elemName变量，因此您不会成为The Horror of Implicit Globals [在我贫血的小博客上发布的帖子]的牺牲品。）< / em>的

但是，如果您要在元素上添加非标准属性，请使用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

＆＃13;
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

用户互动元素只有默认名称属性，例如input,select,button。td没有。所以通过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 />

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

2 个答案: