I have been trying to code a snake game extension for fun and I have run into some problems, programmed buttons on my extension aren't working. I can't click them and haven't found a tutorial that can help me. I'm not sure if I'm just stupid and buttons aren't and haven't been able to be used in extensions but, if they are then my code must be the problem.
This is my HTML code if it helps:
<!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>
I tried your code and your button worked. By not working if you mean that you can not change goodbye back to hello you need to write another function to do it vice versa. I changed your script take a look at it. It is one way of doing it, of course if this was your question.
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>