nextElementSibling 的使用 - 根据另一个输入框的值输入更新一个输入框

Question

我在具有多个结果的表单上使用以下脚本，根据测试中得分的百分比自动输入分数。这些脚本可以正常工作，但前提是输入框和输出框相邻。我需要将分数表放在表格或 div 中，但每当我分离输入时，脚本就会崩溃。任何帮助表示赞赏。

<script>
    function updateInputBox2(inputBox) {
      // Get the value from the current input box
      var inputValue = parseFloat(inputBox.value);

      // Find the corresponding output box
      var outputBox = inputBox.nextElementSibling;

      // Check the range and update the output box accordingly
      var outputBoxValue;
      if (inputValue >= 90) {
        outputBoxValue = 3;
      } else if (inputValue >= 80 && inputValue <= 89) {
        outputBoxValue = 2;
      } else if (inputValue >= 70 && inputValue <= 79) {
        outputBoxValue = 1;
      } else {
        outputBoxValue = 0;
      }

      // Update the value in the corresponding output box
      outputBox.value = outputBoxValue;
    }
  </script>

我想进一步调整该功能，以便它可以与表格或其他布局对象一起使用。我尝试过以各种方式重写代码，但没有成功。我确信我错过了一些明显的东西！

Answer 1

您可以使用

getElementById()

或

querySelector()

来查找所需的元素（输出）。这将使您可以将元素放置在您想要的任何位置。