Question

请参阅以下代码：

function overall() {
var message = ["dog", "cat", "bear", "penguin", "tiger", "eagle", "John Doe"];
function forward() {
    var A = document.getElementById('text');
    for (var i = 0; i < message.length+1; i++) {
        if (A.innerHTML===message[i]) {
            A.innerHTML = message[i+1];
        };
    };
};
function backward() {
    var A = document.getElementById('text');
    for (var i = 0; i < message.length+1; i++) {
        if (A.innerHTML===message[i]) {
            A.innerHTML = message[i-1];
        };
    };
};
};

在上面的JS脚本中，我的意图是调用forward（）函数时，'.innerHTML'中的animal应该使用for循环更改为数组中名为'message'的动物之后的动物。类似地，当调用backward（）函数时，'.innerHTML'中的动物应该在所述数组中的动物之前变为动物。

我验证了我的脚本，据说没有语法错误。这意味着我的逻辑中存在错误。请帮帮我。谢谢！

HTML：

<html>
<head></head>
<body>
   <p id="text">dog</p>
   <div id='right' onclick="forward()"></div>
   <div id="left" onclick="backward()"></div>
</body>
</html>

Answer 1

您永远不能同时拨打forward或backward，因为它们被包含在另一个功能（overall）内，并且您不会以任何方式返回它们。他们是私人的。你甚至没有在overall函数中调用它们，所以你在这里显示的基本上是一个死代码：）

作为旁注：为什么要在;，for和if语句之后添加分号function ???

Answer 2

也许你想要这样做

var message = ["dog", "cat", "bear", "penguin", "tiger", "eagle", "John Doe"];
function forward() {
    var A = document.getElementById('text');
    for (var i = 0; i < message.length; i++) {
        if (A.innerHTML===message[i]) {
            break;
        }
    }
    if(i+1 == message.length) return false;
    A.innerHTML = message[i+1];
};
function backward() {
    var A = document.getElementById('text');
    for (var i = 0; i < message.length; i++) {
        if (A.innerHTML===message[i]) {
        	 break;
        }
    }
    if(i == 0) return false;
    A.innerHTML = message[i-1];
};

   <p id="text">dog</p>
   <button id='right' onclick="forward()">right</button>
   <button id="left" onclick="backward()">left</button>

Answer 3

更改节点时必须停止循环。

例如，初始文本为tiger。你打电话给forward()。循环开始，对于i=4，它进入if，将#text中的文本更改为eagle。下一次迭代，i=5，eagle === eagle，您设置John Doe等...

您所要做的就是在第一次更改后停止循环：

if (A.innerHTML===message[i]) {
    A.innerHTML = message[i+1];
    break;
}

Answer 4

一旦你点击匹配的文字，你就应该使用休息。

   var message = ["dog", "cat", "bear", "penguin", "tiger", "eagle", "John Doe"];
function forward() {

      var A = document.getElementById('text');
      for (var i = 0; i < message.length-1; i++) {
          if (A.innerHTML===message[i]) {
              A.innerHTML = message[i+1];
              break;
          }
      }

}
function backward() {

       var A = document.getElementById('text');
       for (var i = 0; i < message.length-1; i++) {
       if (A.innerHTML===message[i]) {
        A.innerHTML = message[i-1];
        break;
    }
}

  }

这里是plunker https://plnkr.co/edit/rcCIEUejlxog2RkqHkwa?p=preview

现在可以随意调用。但是你需要检查第一个和最后一个位置，因为调用带有dog的向后函数，因为元素A中的文本将导致文本未定义。如果您希望文本循环播放，那么也可以处理。

Answer 5

这有助于您：

<html>
<head>
    <style>
    </style>
</head>
    <body>
        <p id="text">cat</p>
        <button id="btn1" onclick="forward()">Next</button>
        <button id="btn2" onclick="backward()">previous</button>
        <script>
                    var message = ["dog", "cat", "bear", "penguin", "tiger", "eagle", "John Doe"];
                    function forward() {
                        var A = document.getElementById('text');
                        for (var i = 0; i < message.length-1; i++) {
                            if (A.innerHTML === message[i]) {
                                A.innerHTML = message[i+1];
                                break;
                            }
                        }
                    }
                    function backward() {
                        var A = document.getElementById('text');
                        for (var i = message.length-1; i > 0; i--) {
                            if (A.innerHTML===message[i]) {
                                A.innerHTML = message[i-1];
                                break;
                            }
                        }
                    }
        </script>
    </body>
</html>

Answer 6

好吧，我会用一个适用于前进和后退按钮（此处为div）的回调来完成这项工作

var message = ["dog", "cat", "bear", "penguin", "tiger", "eagle", "John Doe"],
        pel = document.getElementById("text"),
        idx = 0,
    getNext = e => pel.innerText = e.target.id == "right" ? message[idx = ++idx%message.length]
                                                          : message[idx = (message.length - (message.length - --idx)%message.length)%message.length];
document.getElementById("right").onclick = getNext;
document.getElementById("left").onclick = getNext;

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer ></script>
  </head>

  <body>
   <p id="text">dog</p>
   <div id="right" style = "background-color:tomato" onclick="getNext">Forward</div>
   <div id="left" style = "background-color:thistle" onclick="getNext">Backward</div>
  </body>

</html>

但是我无法确定这是否是向后按下时获得数组索引的反向模数的最佳方法。我希望有关更好方法的指导。

顺便说一句，我知道IE和Safari的箭头不行，但可以用传统的同行轻松替换它们。

Answer 7

＆＃13;

function overall() {
var message = ["dog", "cat", "bear", "penguin", "tiger", "eagle", "John Doe"];
function forward() {
    var A = document.getElementById('text');
    for (var i = 0; i < message.length; i++) {
        if (A.innerHTML===message[i] && i < message.length-1) { 
            A.innerHTML = message[i+1];
        };
    };
};
function backward() {
    var A = document.getElementById('text');
    for (var i = 0; i < message.length; i++) {
        if (A.innerHTML === message[i] && i > 0) {
            A.innerHTML = message[i-1];
        };
    };
};
};

＆＃13;

用于数组的'for'循环在这个简单的脚本中不起作用

7 个答案: