Question

我正在创建一个电梯程序，其中包括电梯内部的上，下按钮（外部功能）和按钮（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

Answer 1

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

页面上没有<btn>元素，因此document.querySelector('btn')返回null。您已将"btn"非法用作ID，因此document.getElementById('btn')也不会做您期望的事情。

您已经获得了单击的按钮的编号；您以inFunction的身份将其传递给clickedValue。只需使用它即可。

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

1 个答案: