Question

我正在处理一个代码，该代码显示与文本文件中指定的颜色匹配的彩色按钮。但是我遇到的问题是，只有第一个'if'在与条目匹配后执行，并且在最后一个dont中指定的'if'条件被完全检查。比如，如果指定的颜色是红色，蓝色。然后输出只显示红色按钮。

这是我的代码

if(R)
 {
 document.write('<button style="background-color:red;width:100;height:100" </button>');
 }

else

if(V)
 {

  document.write('<button style="background-color:violet;width:100;height:100"       
  </button>');  }

else

 if(I)
 {
document.write('<button style="background-color:indigo;width:100;height:100" 
 </button>');
 }


 else

  if(B)
 {

 document.write('<button style="background-color:blue;width:100;height:100"  
  </button>');
 }

 else

 if(G)
 {

 document.write('<button style="background-color:green;width:100;height:100"   
  </button>');
  }

  else

  if(Y)
  {

document.write('<button style="background-color:yellow;width:100;height:100" 

</button>');
}


 else

 if(O)
 {
document.write('<button style="background-color:orange;width:100;height:100" 

 </button>');
 }

Answer 1

如果要打印多个颜色按钮，则不应使用else。试试这个

if(R)
{
   document.write('<button style="background-color:red;width:100;height:100"   </button>');
}

if(V)
{
   document.write('<button style="background-color:violet;width:100;height:100"       
   </button>');  
}
if(I)
{
   document.write('<button style="background-color:indigo;width:100;height:100" 
   </button>');
}
if(B)
{
  document.write('<button style="background-color:blue;width:100;height:100"  
  </button>');
}
if(G)
{
   document.write('<button style="background-color:green;width:100;height:100"   
   </button>');
}
if(Y)
{
  document.write('<button style="background-color:yellow;width:100;height:100" 
  </button>');
}
if(O)
{
  document.write('<button style="background-color:orange;width:100;height:100"
  </button>');
}

另外，document.write会替换以前的值，因此请尝试追加元素

Answer 2

使用CSS class而不是style。尽量不要使用document.write（除非您使用的是单页架构）。相反，在正确的位置放入HTML：

<button id='mybutton' class='colored'></button>

并在您的CSS文件中：

.colored {
    width:  100;
    height: 100;
    background-color: puce; /* or some other default */
}

然后在你的Javascript中：

var button = document.getElementById('mybutton');
if (button) { button.backgroundColor=calculatedColor(...); }

其中calculatedColor是执行if语句中条件工作的函数。

JQuery有快捷方式，但你应该先使用标准的Javascript。

Answer 3

好吧，你的代码就是这样编写的。条件匹配后，其余部分将被忽略。这就是else的原因。如果您想要评估所有条件，请尝试删除else。

Answer 4

<强>您好，

请在下面试试......这是经过修改的代码行....

if(R)
 {
  document.write('<button style="background-color:red;width:100;height:100"></button>');
 }
else if(V)
 {
  document.write('<button style="background-color:violet;width:100;height:100"></button>');  
 }
else if(I)
 {
  document.write('<button style="background-color:indigo;width:100;height:100"></button>');
 }
else if(B)
 {
  document.write('<button style="background-color:blue;width:100;height:100"></button>');
 }
else if(G)
 {
  document.write('<button style="background-color:green;width:100;height:100"></button>');
 }
else if(Y)
 {
  document.write('<button style="background-color:yellow;width:100;height:100"></button>');
 }
else if(O)
 {
  document.write('<button style="background-color:orange;width:100;height:100"></button>');
 }

谢谢， Vishal Patel

多个if条件不起作用

4 个答案: