建議使用 eventListeners ，這將解決問題
此外，您需要確保正確拼寫 - 它是disabled
/*variables used in index.html document*/
let square;
let clickMe;
/*What the button is suppose to do*/
function doDemo() {
square.style.backgroundColor = "#ff4545";
clickMe.setAttribute("disabled", "true");
setTimeout(clearDemo, 2000);
}
/*removes the attributes when you click the button again*/
function clearDemo(button) {
square.style.backgroundColor = "transparent";
clickMe.removeAttribute("disabled");
}
window.addEventListener("load", function() {
square = document.getElementById("square")
clickMe = document.getElementById('clickMe');
clickMe.addEventListener("click", doDemo);
});
/* color for webpage*/
html {
background: silver;
}
/* setting for heading 1 */
h1 {
color: saddlebrown;
font-family: Helvetica, sans-serif;
text-align: center;
font-size: 55px;
}
/* settings for heading 2 */
h2 {
font-size: 30px;
color: #D2691E;
font-family: Helvetica, sans-serif;
}
/* settings for the introduction line */
.intro {
text-align: center;
padding-bottom: 1em;
font-family: arial;
margin: auto;
max-width: 1100px;
line-height: 2;
font-size: 20px;
}
/* settings for images */
.shake {
display: block;
margin-left: auto;
margin-right: auto;
width: 30%;
}
/* settings for body structure */
.prime {
padding-bottom: 1em;
font-family: arial;
margin-right: auto;
max-width: 900px
}
#square {
width: 100px;
height: 100px;
border: 2px inset gray;
margin-bottom: 1em;
}
button {
padding: .5em 2em;
}
<!DOCTYPE html>
<!-- will need to make java, and css files and link them-->
<html>
<!--website title and attributes-->
<head>
<title>Milkshakes</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<script type="text/javascript" src="script.js"></script>
</head>
<!-- make seprate class for each elment here-->
<body>
<h1>Milkshakes</h1>
<!-- the div class for our images-->
<div class="shake">
<img src="images/milkshake_image_1.jpg" alt="image of a chocolate milkshake">
</div>
<!-- our div class for the introduction line-->
<div class="intro">
<p>When the sun is out and the heat is beating down on you there is nothing as good as a nice cool milkshake. they come in many varietys</p>
</div>
<!-- div class for our body structure-->
<div class="prime">
<h2>What is a milkshake</h2>
<!-- intro sentence-->
<p>A milkshake it is a nice cold drink made with milk and a flavor of your choosing and ice cream mixed until its nice and creamy.</p>
<!-- start of body: section 1-->
<h2>History of the milkshake</h2>
<p>It was during the (1870's-1900's) there was 2 diffrent types of shakes a normal shake and a milkshake but they were very different from each other. the first milkshake made used whole milk, vanilla or stawberry and nutmeg and then you span it for
2 to 3 minutes, you get a frothy beverage that was very nice to drink. it is also belived to have started drive throughs.</p>
<p> the way milkshakes use to be mixed was with a mechanical shakers they were built soley for mixing milkshakes and they took 2 to 3 minutes to mix a shake and the original flavours were chocolate, vanilla pineapple and coffee they were the main ones
you would find there are others but they werent as common.</p>
<!-- new section begins: section 2-->
<h2>The best flavor of milkshake</h2>
<p>now that is a question not so easily answered as everone has different opinons on which flavor is the best my favorite is chocolate or vanilla depends on my mood but for someone else that could be mint or strawberry so thats all on you as i can not
tell you which is the best.</p>
<!-- new section begins: section 3-->
<h2>What is the perfect thickness</h2>
<p>The 3 most common thicknesses you will hear about is thin,regular or thick.
</p>
<!-- are list that we will make collapsable through java-->
<ol>
<li>thin its more of a liquid and light.</li>
<li>regular its a nice consistency of light and thick.</li>
<li>thick which is my personal favorite it more along the lines of just being ice cream and its much heavier then the other 2.</li>
</ol>
<!-- sources for our milkshake stuff-->
<h2>Sources</h2>
<p>
the art of drink:
<a href="https://www.artofdrink.com/soda/history-of-the-milkshake">https://www.artofdrink.com/soda/history-of-the-milkshake</a></p>
</div>
<!-- our 2nd image-->
<div class="shake">
<img src="images/milkshake_image-2.jpg" width="400px" alt="2nd image of a milkshake with different topings">
</div>
<div id="square"></div>
<button type="button" id="clickMe">Click Me</button>
</body>
</html>
