0

我是 javascript 的新手，正在尝试制作一个按钮，每次单击时循环打开/关闭/自动。每个状态还必须运行 if 语句中的代码和 switch 中的代码。我目前无法缝合以使其正常运行。稍后，一旦我开始工作，我希望“if 语句”函数位于它自己的 .js 文件中，这样我就可以为其他开/关/自动按钮引用它。而开关将是主代码的一部分。我究竟做错了什么？

function cycle()
{
    var onoffB = (); 
    if (document.getElementById("button1").value="On")
    {
        onoffB=1;
        document.getElementById("button1").value="Off";
    }  

    else if (document.getElementById("button1").value="Off")
    {
        onoffB=2;
        document.getElementById("button1").value="Auto"
    }
    else
    {
        onoffB=0;
        document.getElementById("button1").value="On"
    }

    switch(onoffB)
    {
        case 0:
        //running code;
        break;
        case 1:
        //running code;
        break;
        case 2:
        //running code;
        break;
    }
}

</script>
</head>
<body>

<input type="button" id="button1" value="On"  onclick="cycle()">

</body>
</html>
4

4 回答 4

3

好吧，我马上就看到了两个大问题。首先，以下语法是无效的 JavaScript：

var onoffB = ();

我认为你的意思是有一个未定义的状态onoffB，你最好这样做：

var onoffB = null;

其次，您使用的是赋值 ( =) 而不是比较 ( ==or ===)。（根据经验，除非您有充分的理由并且知道自己在做什么，否则您应该始终更喜欢。）请考虑以下几点===：==

var x = 3;                        // *sets* the value of x to 3

var x == 3;                       // invalid syntax
var x === 3;                      // invalid syntax

if( x = 2 ) { print 'x is 2'; }   // will *always* print 'x is 2', no matter what
                                  // the value of x is; x now has the value 2
                                  // PROBABLY NOT WHAT YOU WANT

if( x = 0 ) { print 'x is 0'; }   // will *never* print 'x is 0', no matter what
                                  // the value of x is; x now has the value 0
                                  // PROBABLY NOT WHAT YOU WANT

if( x === 5 ) { print 'x is 5'; } // will only print 'x is 5' if the value of x
                                  // is 5; value of x 

if( x === 0 ) { print 'x is 0'; } // will only print 'x is 0' if the value of x
                                  // is 0; value of x unchanged

有很多风格上的东西我也会改变。由于您的格式选择，您的代码真的很难阅读。此外，还有很多不必要的重复代码。如果我正在写这篇文章，我会将其缩短为以下内容：

switch( document.getElementById("button1").value ) {
  case 'On':
      // do stuff
      break;
  case 'Off':
      // do stuff
      break;
  case 'Auto':
      // do stuff
      break;
  default:
      // probably an error condition; show message, maybe? 
      break;
}

如果你真的需要 on/off/auto 按钮的值，你可以在casebody 中设置它。

于 2013-10-05T22:17:17.420 回答
0

  1. 在这条线上：

    var onoffB = ();

    您需要删除初始化程序或用其他内容替换括号。

  2. 在您的每个if陈述中：

    if (document.getElementById("button1").value="On")

    您正在设置，value使其始终为真。您可能想比较 using==而不是在这里分配 with =。

  3. 虽然这不是一个真正的问题，而是一个可能的改进，但我建议将结果document.getElementById放入一个变量中，这样您就不必一直调用它。它本身应该相当快，但做一次可能会更快。

于 2013-10-05T22:17:02.273 回答
0

这是完整的工作和运行代码：

<html>
<head>
<script type="text/javascript">
function cycle()
{
    var onoffB = null; 
    if (document.getElementById("button1").value == "On")
    {
        onoffB = 1;
        document.getElementById("button1").value = "Off";
    }  

    else if (document.getElementById("button1").value == "Off")
    {
        onoffB = 2;
        document.getElementById("button1").value = "Auto";
    }

    else if (document.getElementById("button1").value == "Auto")
    {
        onoffB = 0;
        document.getElementById("button1").value = "On";
    }

    switch(onoffB)
        {
            case 0:
            //running code;
            break;
            case 1:
            //running code;
            break;
            case 2:
            //running code;
            break;
    }
}

</script>
</head>
<body>

<input type="button" id="button1" value="On" onclick="cycle();">

</body>
</html>

如您所见，主要问题是：

  1. 你设置 var onoffB = (); 虽然它应该是空的。
  2. 您应该使用“==”而不是“=”。
  3. 当值为“Auto”时，缺少另一个“else if”。

我希望我有所帮助:-)

于 2013-10-05T22:33:59.757 回答
0

尝试这样的事情：

var doc = document, bod = doc.body;
function E(e){
  return doc.getElementById(e);
}
var state = 'On';
function onOffAuto(element){
  var e = element;
  switch(state){
    case 'On':
      e.value = state = 'Off';
      return;
    case 'Off':
      e.value = state = 'Auto';
      return;
    case 'Auto':
      e.value = state = 'On';
      return; 
   }
}
E('button1').onclick = function(){
  onOffAuto(this);
}
于 2013-10-05T22:53:21.607 回答