错误:单击按钮后更新电梯和用户的值

我正在创建电梯的一个程序，其中包括电梯内的向上，向下按钮(外部功能(和按钮(0到5：：内部功能(，我的外部功能工作正常，但是当电梯内部用户按下任何按钮时，电梯应该转到那个地方。并更新用户和电梯的位置。但是当我按下按钮(0,1,2,3,4,5(时它不起作用。谁能帮我解决问题。提前谢谢。

code::
<!DOCTYPE html>
<html lang="en">
<head>
  <title>elevator</title>
</head>
<body>
  <h2>Internal Functions</h2>
  <span>current user position :: </span>
  <p id="userPosition"></p>
  <span>current elevator position :: </span>
  <p id="elevatorPostion"></p>
  <button id="btn" onclick="inFunction(0)" value="0">0</button>
  <button id="btn" onclick="inFunction(1)" value="1">1</button>
  <button id="btn" onclick="inFunction(2)" value="2">2</button>
  <button id="btn" onclick="inFunction(3)" value="3">3</button>
  <button id="btn" onclick="inFunction(4)" value="4">4</button>
  <button id="btn" onclick="inFunction(5)" value="5">5</button>
  <h2>External Functions</h2>
  user position:
  <input type="text" id="userText" name="UserPosition" value="0">
  <button onclick="exFunction('up')">UP</button>
  <button onclick="exFunction('down')">DOWN</button>
  <script>
    var userPosition = 0,
      elevatorPosition = 4
    function exFunction(pressedValue) {
      console.log(pressedValue);
      var userPosition = document.getElementById("userText").value;
      document.getElementById("userPosition").innerHTML = userPosition;
      document.getElementById("elevatorPostion").innerHTML = elevatorPosition;
      var intervalEle = setInterval(function () {
        if (userPosition > elevatorPosition) {
          console.log('Elevator position', elevatorPosition);
          elevatorPosition++;
        } else if (userPosition < elevatorPosition) {
          elevatorPosition--;
        } else {
          elevatorPosition == userPosition;
          clearInterval(intervalEle);
        }
        document.getElementById("userPosition").innerHTML = userPosition;
        document.getElementById("elevatorPostion").innerHTML = elevatorPosition;
      }, 1000);
    }
    function inFunction(clickedValue) {
      var btnValue = document.querySelector('btn').value;
      document.getElementById("userPosition").innerHTML = userPosition;
      document.getElementById("elevatorPostion").innerHTML = elevatorPosition;
      console.log(btnValue);
      var intervalEle2 = setInterval(function () {
        if (elevatorPosition > btnValue) {
          elevatorPosition--
        } else if (elevatorPosition < btnValue) {
          elevatorPosition++
        } else {
          elevatorPosition == btnValue;
          clearInterval(intervalEle2)
        }
        document.getElementById("userPosition").innerHTML = userPosition;
        document.getElementById("elevatorPostion").innerHTML = elevatorPosition;
      }, 1000)
    }
  </script>
</body>
</html>

输出： https://i.stack.imgur.com/tKeeL.png

var btnValue = document.querySelector('btn').value;

您的页面上没有<btn>元素，因此document.querySelector('btn')返回null 。您非法重复使用"btn"作为 ID，因此document.getElementById('btn')也不会按照您的期望行事。

您已经获得了单击的按钮的编号;您将其作为clickedValue传递给inFunction。就用它。

相关内容

最新更新

热门标签：