我还是 JS 的新手，并尝试实现 switch 语句来更改 HTML 按钮颜色。然而调试控制台抛出
未捕获的语法错误 - 意外的令牌情况。
我看过几个语法示例和类似的 stackoverflow 问题，但似乎我做的其他一切都是正确的；低效的 if-else 语句运行良好。有没有人看到问题？
// main.js
var counter = 0;
var pix = 3;
function addFunction() {
document.getElementById("count").innerHTML = counter += 1;
}
function subtractFunction() {
if (counter > 0) {
document.getElementById("count").innerHTML = counter -= 1;
} else {
alert("Value cannot get negative!")
}
}
function resetFunction() {
document.getElementById("count").innerHTML = counter = 0;
}
function changeFunction() {
pix += 1;
document.getElementById("changebutton").style.padding = pix + "px " + pix + "px " + pix + "px " + pix + "px"
}
function weirdFunction() {
var bgcolor = document.getElementById("weirdbutton");
switch (bgcolor.style.backgroundColor) {
case "white":
bgcolor.style.backgroundColor = "green";
break;
case "green":
bgcolor.style.backgroundColor = "blue";
break;
case "blue":
bgcolor.style.backgroundColor = "red";
break;
case "red":
bgcolor.style.backgroundColor = "white";
break;
}
}.cardblock {
position: center;
text-align: center;
background-color: white;
padding: 0px 0px 15px 15px;
border-radius: 30px;
margin: 10px 100px;
}
.card {
padding: 10px 10px 0px 0px;
border-radius: 30px;
}
#count {
background-color: lightgrey;
padding: 10px;
width: 10%;
margin: 0 auto;
font-size: 150%;
border-radius: 10px;
}
button {
width: auto;
margin: 0 auto;
color: black;
border-radius: 3px;
border-style: groove;
padding: 2px 2px 2px 2px;
}
#addbutton {
background-color: lightgreen;
}
#subbutton {
background-color: pink;
}
#reset-button {
background-color: red;
}
#changebutton {
background-color: lightblue;
color: black;
}
html {
background-color: lightgray;
}<!DOCTYPE html>
<html>
<head>
<title id="title">Hey y'all</title>
<script src="/main.js"></script>
<link type="text/css" rel="stylesheet" href="index.css">
</head>
<body>
<div class="cardblock">
<div class="card">
<h3>People count:</h3>
</div>
<div class="card">
<h4 id="count">0</h4>
</div>
<div class="card">
<button id="addbutton" onclick="JavaScript:addFunction()">Add</button>
<button id="subbutton" onclick="JavaScript:subtractFunction()">Subtract</button>
</div>
<div class="card">
<button id="reset-button" onclick="JavaScript:resetFunction()">Reset</button>
</div>
</div>
<div class="cardblock" id="playground">
<div class="card">
<h3>Let's attempt to change the HTML elements</h3>
<i>First, write some cr*p</i><br>
<b>Then, make some buttons to change HTML elements or CSS props</b>
</div>
<div class="card">
<button id="changebutton" onclick="JavaScript:changeFunction()">Change</button>
<button id="weirdbutton" onclick="JavaScript:weirdFunction()">Weird</button>
</div>
</div>
</body>
</html>我还没有格式化/美化一切，抱歉。
elem.style.property指元素的内联样式。您需要添加内联样式switch才能工作。
var counter = 0;
var pix = 3;
function addFunction() {
document.getElementById("count").innerHTML = counter += 1;
}
function subtractFunction() {
if (counter > 0) {
document.getElementById("count").innerHTML = counter -= 1;
} else {
alert("Value cannot get negative!")
}
}
function resetFunction() {
document.getElementById("count").innerHTML = counter = 0;
}
function changeFunction() {
pix += 1;
document.getElementById("changebutton").style.padding = pix + "px " + pix + "px " + pix + "px " + pix + "px"
}
function weirdFunction() {
var bgcolor = document.getElementById("weirdbutton");
switch (bgcolor.style.backgroundColor) {
case "white":
bgcolor.style.backgroundColor = "green";
break;
case "green":
bgcolor.style.backgroundColor = "blue";
break;
case "blue":
bgcolor.style.backgroundColor = "red";
break;
case "red":
bgcolor.style.backgroundColor = "white";
break;
}
}.cardblock {
position: center;
text-align: center;
background-color: white;
padding: 0px 0px 15px 15px;
border-radius: 30px;
margin: 10px 100px;
}
.card {
padding: 10px 10px 0px 0px;
border-radius: 30px;
}
#count {
background-color: lightgrey;
padding: 10px;
width: 10%;
margin: 0 auto;
font-size: 150%;
border-radius: 10px;
}
button {
width: auto;
margin: 0 auto;
color: black;
border-radius: 3px;
border-style: groove;
padding: 2px 2px 2px 2px;
}
#addbutton {
background-color: lightgreen;
}
#subbutton {
background-color: pink;
}
#reset-button {
background-color: red;
}
#changebutton {
background-color: lightblue;
color: black;
}
html {
background-color: lightgray;
}<!DOCTYPE html>
<html>
<head>
<title id="title">Hey y'all</title>
<script src="/main.js"></script>
<link type="text/css" rel="stylesheet" href="index.css">
</head>
<body>
<div class="cardblock">
<div class="card">
<h3>People count:</h3>
</div>
<div class="card">
<h4 id="count">0</h4>
</div>
<div class="card">
<button id="addbutton" onclick="addFunction()">Add</button>
<button id="subbutton" onclick="subtractFunction()">Subtract</button>
</div>
<div class="card">
<button id="reset-button" onclick="resetFunction()">Reset</button>
</div>
</div>
<div class="cardblock" id="playground">
<div class="card">
<h3>Let's attempt to change the HTML elements</h3>
<i>First, write some cr*p</i><br>
<b>Then, make some buttons to change HTML elements or CSS props</b>
</div>
<div class="card">
<button id="changebutton" onclick="changeFunction()">Change</button>
<button style="background-color: red" id="weirdbutton" onclick="weirdFunction()">Weird</button>
</div>
</div>
</body>
</html>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句