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

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

javascript html css

JavaScript：使用按钮更改文本颜色，每次单击按钮时都会显示不同的样式。不起作用,javascript,html,css,Javascript,Html,Css,我对JavaScript相当陌生。我刚刚制作了一个简单的脚本： [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

我对JavaScript相当陌生。我刚刚制作了一个简单的脚本：

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

我希望它在每次单击按钮时将文本更改为不同的样式。然而，这是行不通的。有人能解释一下正确的方法吗？

是的

getElementById("text")

不是

如果我得到了你想要达到的目标，你应该把

status=1在函数外部。将其声明为全局变量，以便在每个if中对其进行更改
此外，如果

而不是

如果

试试这个：

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块”后忽略其他“if块”

希望这有帮助。

您需要在函数外部定义变量

status=1

，否则每次单击按钮时它都会设置为1。还需要更改

GetElementById（“文本”）到getElementById（“文本”）
试试这个代码
 <!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>


登录页面
#身体{
线高：35px；
}
跨度{
颜色：黑色；
字体系列：monospace；
}
钮扣{
右边距：10px；
字体系列：monospace；
}
格林先生{
背景颜色：绿色；
}
蓝先生{
背景颜色：蓝色；
}
瑞德先生{
背景色：红色；
}
格雷先生{
背景颜色：灰色；
}
布莱克先生{
背景色：黑色；
颜色：白色；
}
#正文{
字体大小：20px；
}
选择文本的颜色

绿色
蓝色
红色
灰色
黑色


选择背景颜色

绿色
蓝色
红色
灰色
黑色的`
洛雷姆，我的爱人，我的爱人
精英。在iure illo的非accusamus中包含类似的
麦格纳姆、诺比斯沃卢帕斯塞佩、德洛雷姆雷克桑代福加（dolorem Recussandae fuga）
莫迪乌特。
//更改文本颜色
函数green（）{
document.getElementById（“text”）.style=“颜色：绿色”；
}
函数蓝（）{
document.getElementById（“text”）.style=“颜色：蓝色”；
}
函数red（）{
document.getElementById（“text”）.style=“颜色：红色”；
}
函数gray（）{
document.getElementById（“text”）.style=“颜色：灰色”；
}
函数black（）{
document.getElementById（“text”）.style=“颜色：黑色”；
}
很乐意帮忙。你没有说明你想要实现什么，所以我提出了问题。我现在将编辑，我知道请添加一些解释到您的代码，例如，它如何解决问题
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;
}

}

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

}

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