年年月月日日无bug 2023-04-09 18:12 采纳率: 54.5%
浏览 48
已结题

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>
  • 写回答

2条回答 默认 最新

  • 瞬间的未来式 2023-04-09 18:35
    关注

    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';
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 4月9日
  • 已采纳回答 4月9日
  • 修改了问题 4月9日
  • 创建了问题 4月9日

悬赏问题

  • ¥15 随身WiFi网络灯亮但是没有网络，如何解决？
  • ¥15 gdf格式的脑电数据如何处理matlab
  • ¥20 重新写的代码替换了之后运行hbuliderx就这样了
  • ¥100 监控抖音用户作品更新可以微信公众号提醒
  • ¥15 UE5 如何可以不渲染HDRIBackdrop背景
  • ¥70 2048小游戏毕设项目
  • ¥20 mysql架构，按照姓名分表
  • ¥15 MATLAB实现区间[a,b]上的Gauss-Legendre积分
  • ¥15 delphi webbrowser组件网页下拉菜单自动选择问题
  • ¥15 linux驱动，linux应用，多线程