js innerHTML改变之后，没有效果
<html>
<head>
<title>扫雷</title>
</head>
<body>
<h1>扫雷</h1>
<div id = "map">
</div>
<script>
var m = document.getElementById("map")
var biaojishu = 0
var map = [[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0]]
var k = 0
while(k<10){
var rnd = Math.floor(Math.random()*10)
var rnd2 = Math.floor(Math.random()*10)
if(map[rnd][rnd2] != 0){
continue
}else{
map[rnd][rnd2] = "雷"
}
k++
}
for(var h=0;h<10;h++){
for(var t=0;t<10;t++){
var leishu = 0
if(map[h][t] != "雷"){
if(h-1 != -1 && t-1 != -1 && map[h-1][t-1]=="雷"){
leishu++
}
if(h-1 != -1 && map[h-1][t]=="雷"){
leishu++
}
if(h-1 != -1 && t+1 != 10 && map[h-1][t+1]=="雷"){
leishu++
}
if(t-1 != -1 && map[h][t-1]=="雷"){
leishu++
}
if(t+1 != 10 && map[h][t+1]=="雷"){
leishu++
}
if(h+1 != 10 && t-1 != -1 && map[h+1][t-1]=="雷"){
leishu++
}
if(h+1 != 10 && map[h+1][t]=="雷"){
leishu++
}
if(h+1 != 10 && t+1 != 10 && map[h+1][t+1]=="雷"){
leishu++
}
map[h][t] = leishu
}
}
}
var buttons = []
for(var i=0;i<10;i++){
for(var j=0;j<10;j++){
m.innerHTML += "<div id='div" + (i* 10 + (j+1)) + "' style='position:absolute;border:1px outset black;background-color:gray;width:24px;height:24px;top:" + (150+i*24) + "px;left:" + (400+j*24) + "px;' " + "onmousedown = 'buttonclick(" + i + "," + j +","+event+ ")'></div>"
var newbutton = document.getElementById("div"+(i*10+(j+1)))
buttons.push({digui:false,buttonid:newbutton,open:false,isbiaoji:false})
}
}
function buttonclick(line,col,e){
var e = event || window.event
if(e.button === 0){
switch(map[line][col]){
case 0:
buttons[line*10+col].digui = true
buttons[line*10+col].innerHTML = ' ' 问题出在这
buttons[line*10+col].style.background = 'white'
var bigger = line+1==10||col+1==10
var smaller = line-1==-1||col-1==-1
if(!smaller){
if(map[line-1][col]==0){
if(buttons[(line-1)*10+col].digui != true){
buttonclick((line-1),col)
}
}
}
if(!bigger){
if(map[line+1][col]==0){
if(buttons[(line+1)*10+col].digui != true){
buttonclick((line+1),col)
}
}
}
if(!smaller){
if(map[line][col-1]==0){
if(buttons[line*10+(col-1)].digui != true){
buttonclick(line,(col-1))
}
}
}
if(!bigger){
if(map[line][col+1]==0){
if(buttons[line*10+(col+1)].digui != true){
buttonclick(line,(col+1))
}
}
}
break
case '雷':
if(buttons[line*10+col].isbiaoji == true){
buttons[line*10+col].isbiaoji = false
document.getElementById("div"+(line*10+(col+1))).style.background = 'gray'
break
}
document.getElementById("div"+(line*10+(col+1))).innerHTML = "雷"
document.getElementById("div"+(line*10+(col+1))).style.background = 'white'
alert("你踩雷了")
buttons[line*10+col].open = true
break
default:
if(buttons[line*10+col].isbiaoji == true){
buttons[line*10+col].isbiaoji = false
document.getElementById("div"+(line*10+(col+1))).style.background = 'gray'
break
}
document.getElementById("div"+(line*10+(col+1))).innerHTML = map[line][col]
document.getElementById("div"+(line*10+(col+1))).style.background = 'white'
buttons[line*10+col].open = true
break
}
}
if(e.button === 2){
if(buttons[line*10+col].open == false&&buttons[line*10+col].isbiaoji == false){
buttons[line*10+col].isbiaoji = true
document.getElementById("div"+(line*10+(col+1))).style.background = 'blue'
if(map[line][col] == "雷"){
biaojishu++
}
}
if(biaojishu == 10){
alert("you win")
}
}
}
</script>
</body>
</html>
chatgpt;
buttons[line*10+col]是一个HTML元素，而不是包含HTML元素的JavaScript对象，因此您无法使用 innerHTML 属性更新其内容。
正确的方法是使用 textContent 属性，如下所示：
buttons[line*10+col].textContent = ' ';
这将更新所选按钮的文本内容。同样，您需要使用 style.backgroundColor 属性而不是 background 属性来更改按钮的背景颜色。因此，您需要将代码中的以下行：
buttons[line*10+col].style.background = 'white';
//改成
buttons[line*10+col].style.backgroundColor = 'white';
- 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7729755
- 这篇博客也不错, 你可以看下innerHTML
- 除此之外, 这篇博客: JS事件篇中的 使用innerHTML也可以完成DOM的增删改操作 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
