Question

我有2个文件： index.html和code.js

我有两个问题：

首先，“查找单词：”句子不会出现在浏览器中。

其次，我有一个创建表（10x10）的for循环。这个表包含随机字母，我想用我的鼠标为我悬停的字母的背景上色，但每次我悬停时都会出现同样的错误：Uncaught TypeError: Cannot read property 'style' of undefined: document.getElementsByName.onmouseenter

document.write("Find word:");

var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

var s='<table border= "1" >';
for(var j=0;j<10;++j)
{
  s+='<tr height="30px">'; 
  for(var i=0;i<10;++i)
    {
	  s +='<td width="20px" align="center" id="letter" name="letter">'+ possible.charAt(Math.floor(Math.random() * possible.length))+'</td>'; 
    }
  s+='</tr>'; 
}
s+='</table>'; 

document.body.innerHTML=s;


for(var i=0;i<document.getElementsByName('letter').length;i++)
{
	document.getElementsByName('letter')[i].onmouseenter=function(){
		document.getElementsByName('letter')[i].style.backgroundColor="red";
	};
}

<script src="code.js"></script>

Answer 1

只需在onmouseenter函数中使用this来指示您要更改的元素。

document.write("Find word:");

var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

var s='<table border= "1" >';
for(var j=0;j<10;++j)
{
  s+='<tr height="30px">'; 
  for(var i=0;i<10;++i)
    {
	  s +=  '<td width="20px" align="center" id="letter" name="letter">'+ possible.charAt(Math.floor(Math.random() * possible.length))+'</td>'; 
    }
  s+='</tr>'; 
}
s+='</table>'; 

document.body.innerHTML=s;


for(var i=0;i<document.getElementsByName('letter').length;i++)
{
	document.getElementsByName('letter')[i].onmouseenter=function(){
		this.style.backgroundColor="red";
	};
}

<script src="code.js"></script>

Answer 2

问题在于这一行：

document.getElementsByName('letter')[i].style.backgroundColor="red";

mouseenter循环的每次运行都会覆盖for侦听器，因此i始终等于100.相反，请尝试使用this来引用您的元素将听众附加到：

this.style.backgroundColor="red";

document.body.innerHTML = ("Find word:<br/><br/>");

var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

var s = '<table border= "1" >';
for (var j = 0; j < 10; ++j) {
  s += '<tr height="30px">';
  for (var i = 0; i < 10; ++i) {
    s += '<td width="20px" align="center" id="letter" name="letter">' + possible.charAt(Math.floor(Math.random() * possible.length)) + '</td>';
  }
  s += '</tr>';
}
s += '</table>';

document.body.innerHTML += s;


for (var i = 0; i < document.getElementsByName('letter').length; i++) {
    document.getElementsByName('letter')[i].onmouseenter = function() {
      this.style.backgroundColor = "red";
    };
}

<script src="code.js"></script>

Answer 3

为什么不简单地使用css？

td:hover {
   background-color: red;
}

和BTW，你写＆＃34;找到Word：＆＃34;身体，但覆盖整个身体做 document.body.innerHTML = s; ... 你必须先加上你的第一句话，或者更好的是，提供一个带有你头衔的html和一个专门的div来建立你的桌子。

未捕获的TypeError：无法读取未定义的属性“样式”：document.getElementsByName.onmouseenter

3 个答案: