为了好玩，我一直在尝试编写一个蛇游戏扩展程序，但遇到了一些问题，扩展程序上的编程按钮无法工作。我无法点击它们，也没有找到可以帮助我的教程。我不确定我是否只是愚蠢，按钮没有也没有能够在扩展中使用，但是，如果它们是，那么我的代码一定是问题所在。
如果有帮助的话，这是我的HTML代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/button.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Snake</title>
<style>
body{
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
canvas{
box-shadow: black 20px 10px 50px;
}
</style>
</head>
<body>
<h1>Snake</h1>
<button onclick="doSomething()">Restart</button>
<p id="test">Hello</p>
<script>
function doSomething(){
document.getElementById("test").innerHTML = "Goodbye";
}
</script>
<script src="/js/index.js"></script>
<canvas id="game" width="400" height="400"></canvas>
</body>
</html>
我试过你的代码，你的按钮工作了。如果您的意思是不能将再见更改回你好，则不工作，您需要编写另一个函数来执行此操作，反之亦然。我修改了你的剧本，看看吧。当然，如果这是你的问题，这是一种方法。
function doSomething() {
if (document.querySelector("p").innerHTML === "Hello") {
document.querySelector("p").innerHTML = "Goodbye";
} else {
document.querySelector("p").innerHTML = "Hello";
}
}body {
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
canvas {
box-shadow: black 20px 10px 50px;
}
</style<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/button.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Snake</title>
</head>
<body>
<h1>Snake</h1>
<button onclick="doSomething()">Restart</button>
<p>Hello</p>
<script src="/js/index.js"></script>
<canvas id="game" width="400" height="400"></canvas>
</body>
</html>