简单表格上的 html 和 javascript

Question

我正在学习网络开发的基础课程。我使用 html 创建了一个非常简单的表格，其中包含 2 列：苹果和水果。水果应该是苹果的数量 + 5（为了更好理解的基本方法）。我也尝试添加一个 addeventlistenervar apples = document.getElementById('apples');var fruits = document.getElementById('fruits');function calculate() {  fruits = apples + 5;  fruits.innerHTML = fruits;}// Get all the input columnsvar inputElement = document.getElementById('apples');// Add Event Listeners to all the input columnsinputElement.addEventListener('change', calculate);<table class="egt">  <tr>    <th>apples</th>    <th>fruits</th>  </tr>  <tr>    <td>      <input type="number" id="apples">    </td>    <td>      <input type="number" id="fruits">    </td>  </tr></table>我没有在“水果”栏中得到“8”。我在代码中遗漏了什么吗？提前致谢

Answer 1

var fruits = document.getElementById('fruits');

function calculate(event) {

//use event here to get the apples element value on every change event.target.value so you dont have to fetch the element every time

  fruits.value = (parseInt(event.target.value) + 5);

  //parse it as nummber and + 5

}

var inputElement = document.getElementById('apples');

inputElement.addEventListener('change', calculate);

<table class="egt">

  <tr>

    <th>apples</th>

    <th>fruits</th>

  </tr>

  <tr>

    <td>

      <input type="number" id="apples">

    </td>

    <td>

      <input type="number" id="fruits">

    </td>

  </tr>

</table>

Answer 2

value输入值在标签的属性上更新input。所以需要得到像fruits.value和这样的价值apple.value。

并且apples.value是字符串，所以求和运算需要转为数字。

var apples = document.getElementById('apples');

var fruits = document.getElementById('fruits');

function calculate() {

  fruits.value = Number(apples.value) + 5;

}

// Get all the input columns

var inputElement = document.getElementById('apples');

// Add Event Listeners to all the input columns

inputElement.addEventListener('change', calculate);

<table class="egt">

  <tr>

    <th>apples</th>

    <th>fruits</th>

  </tr>

  <tr>

    <td>

      <input type="number" id="apples">

    </td>

    <td>

      <input type="number" id="fruits">

    </td>

  </tr>

</table>

Answer 3

从中获取字符串值apples.value并用于parseInt转换为整数，然后更新水果。

var apples = document.getElementById('apples');

var fruits = document.getElementById('fruits');

  

  function calculate() {

    fruits.value = parseInt(apples.value) + 5;

  }

  // Get all the input columns

  var inputElement = document.getElementById('apples');

  // Add Event Listeners to all the input columns

  inputElement.addEventListener('change', calculate);

<table class="egt">

        <tr>

          <th>apples</th>

          <th>fruits</th>

        </tr>

        <tr>

          <td>

            <input type="number" id="apples">

          </td>

          <td>

            <input type="number" id="fruits">

          </td>

        </tr>

      </table>