JavaScript：使用按钮更改文本颜色，每次单击按钮时应显示不同的样式。不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21362784/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript: Change text color with a button, each time the button is clicked a different style should show up. Not working
提问by YSbakker
I'm fairly new to JavaScript. I just made this simple script:
我对 JavaScript 还很陌生。我刚刚制作了这个简单的脚本：
[HTML code]
[HTML 代码]
<html>
<body>
<script src="externalscript.js"></script>
<p id="text">This text will change style</p><br>
<button type="button" onclick="changeStyle()">Click me</button>
</body>
</html>
[JS code]
【JS代码】
function changeStyle() {
status = 1;
x = document.GetElementById("text");
if(status==1) {
x.style.color = 'blue';
status = 2;
}
if(status==2) {
x.style.color = 'red';
status = 3;
}
if(status==3) {
x.style.color = 'yellow';
status = 1;
}
}
I want it to change the text to a different style each time the button is clicked. However, this is not working. Could anyone explain a way to do this correctly?
我希望每次单击按钮时将文本更改为不同的样式。但是，这是行不通的。谁能解释一下正确执行此操作的方法？
采纳答案by laaposto
It is
它是
getElementById("text")
not
不是
GetElementById("text");
Also if i get what are you trying to achieve you should put status = 1;outside the function. Declare it as a global variable so that you cab change it inside each if.
另外，如果我明白你想实现什么，你应该把它放在status = 1;函数之外。将其声明为全局变量，以便您可以在每个 if 内更改它。
Also you have to use else_ifinstead of if
你也必须使用else_if代替if
回答by mitchazj
Try this:
试试这个：
status = 1;
function changeStyle() {
//Note the lowercase first letter.
x = document.getElementById("text");
if(status==1) {
x.style.background-color = 'blue';
status = 2;
}
else if(status==2) {
x.style.background-color = 'red';
status = 3;
}
else if(status==3) {
x.style.background-color = 'yellow';
status = 1;
}
}
You need to use 'else if' because otherwise the browser, after changing the color, immediately moves unto the next if block, and thinks "well that's true now", and then runs that code, all the way to the end of your current code. Using 'else if' tell the browser to ignore the other 'if blocks' once the first one is evaluated.
您需要使用“else if”，否则浏览器在更改颜色后会立即移动到下一个 if 块，并认为“现在是真的”，然后运行该代码，一直到当前的末尾代码。使用“else if”告诉浏览器在评估第一个“if块”后忽略其他“if块”。
Hope this helps.
希望这可以帮助。
回答by Pranav C Balan
You need to define variable status=1outside the function,otherwise each time when button clicking it will set to 1.Also need to change GetElementById("text");togetElementById("text");
您需要定义变量status=1函数外，否则每次当按钮点击它会设置为1.Also需要改变的时间GetElementById("text");到getElementById("text");
status = 1;
function changeStyle() {
x = document.getElementById("text");
if(status==1) {
x.style.backgroundColor = 'blue';
status = 2;
}
else if(status==2) {
x.style.backgroundColor = 'red';
status = 3;
}
else if(status==3) {
x.style.backgroundColor = 'yellow';
status = 1;
}
}
回答by Floyd Fernandes
Try this code
试试这个代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
login page
</title>
<style>
#body{
line-height: 35px;
}
span {
color: black;
font-family: monospace;
}
button {
margin-right: 10px;
font-family: monospace;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.red {
background-color: red;
}
.gray {
background-color: gray;
}
.black {
background-color: black;
color: white;
}
#text {
font-size: 20px;
}
</style>
</head>
<body>
<div id="body">
<div>
<span>Select the color for text</span><br>
<button onclick="green()" class="green">Green</buttton>
<button onclick="blue()" class="blue">Blue</buttton>
<button onclick="red()" class="red">Red</buttton>
<button onclick="gray()" class="gray">Gray</buttton>
<button onclick="black()" class="black">Black</buttton>
</div>
<br>
<div>
<span>Select the color for background</span><br>
<button onclick="document.body.style.backgroundColor = 'green';"
class="green">Green</buttton>
<button onclick="document.body.style.backgroundColor = 'blue';"
class="blue">Blue</buttton>
<button onclick="document.body.style.backgroundColor = 'red';"
class="red">Red</buttton>
<button onclick="document.body.style.backgroundColor = 'gray';"
class="gray">Gray</buttton>
<button onclick="document.body.style.backgroundColor = 'black';" `
class="black">Black</buttton>`
</div>
<div>
<span id="text">Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Incidunt ea non accusamus at iure illo quasi deserunt commodi
magnam, quo optio illum nobis voluptas saepe, dolorem recusandae fuga
modi ut.</span>
</div>
</div>
<script>
//change the text color
function green() {
document.getElementById("text").style = "color:green";
}
function blue() {
document.getElementById("text").style = "color:blue";
}
function red() {
document.getElementById("text").style = "color:red";
}
function gray() {
document.getElementById("text").style = "color:gray";
}
function black() {
document.getElementById("text").style = "color:black";
}
</script>
</body>
</html>
