Question

我是JavaScript的新手。我刚刚编写了这个简单的脚本：

[HTML code]

<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]

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;
}

}

我希望每次单击按钮时将文本更改为不同的样式。但是，这不起作用。任何人都可以解释一种正确的方法吗？

Answer 1

试试这个：

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;
}

}

你需要使用'else if'，因为否则浏览器在更改颜色后会立即移动到下一个if块，并认为“现在就是这样”，然后运行该代码，一直到最后你当前的代码。使用'else if'告诉浏览器在评估第一个后忽略其他'if blocks'。

希望这有帮助。

Answer 2

是

getElementById("text")

不是

GetElementById("text");

此外，如果我得到你想要实现的目标，你应该将status = 1;放在函数之外。将其声明为全局变量，以便您在每个if中更改它。

此外，您必须使用else_if代替if

DEMO

Answer 3

您需要在函数外部定义变量status=1，否则每次按下按钮时都会设置为1.还需要将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;
}

}

Answer 4

尝试此代码

 <!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>

JavaScript：使用按钮更改文本颜色，每次单击按钮时都应显示不同的样式。不工作

4 个答案: