0

我正在编写一个代码，它显示与文本文件中指定的颜色匹配的彩色按钮。但是我面临一个问题，即只有第一个“if”在与条目匹配之后执行，而最后一个中指定的“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>');
 }
4

4 回答 4

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 替换以前的值，因此尝试附加元素

于 2013-10-21T14:01:44.260 回答
1

使用 CSS classes 而不是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(...); }

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

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

于 2013-10-21T14:13:51.083 回答
0

好吧，你的代码就是这样写的。一旦条件匹配，其余的将被忽略。这就是为什么else。else如果要评估所有条件，请尝试删除s。

于 2013-10-21T13:55:15.073 回答
0

你好，

请在下面尝试……这是修改后的代码行……

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

谢谢你，维沙尔·帕特尔

于 2013-10-21T14:05:55.277 回答