使用 javascript 进行表单操作

Question

我正在尝试对使用 select 选项值输入到表单中的值进行一些算术运算。出于某种原因，我在控制台中得到的是 undefined 而不是结果值。

function sum() {
  const Start = Number(document.getElementById('Start1').value);
  const End = Number(document.getElementById('End1').value);
  const select = document.querySelector('select');
  const choice = select.value;
  let result;

  select.addEventListener('change', setValue);

  function setValue() {
    if (choice === 'AM->PM') {
      result = (12 - Start) + (End);
    }
    console.log(result);
    document.getElementById('txtresult').value = result;
  }
}

<div id="box1">
  <label for="Starting">Date:</label>
  <input type="date" id="Date" name="Date"><br>
  <label for="Starting">Start Time:</label>
  <input type="text" id="Start1" placeholder="Start Time" name="Start_Time">
  <!--Input #1-->
  <br>

  <label for="End Time">End Time:</label>
  <input type="text" id="End1" placeholder="End Time" name="End_Time" onkeyup="sum()">
  <!--Input #2-->
  <select id="AM/PM">
    <option value="">--AM/PM--</option>
    <option value="AM">AM->AM</option>
    <option value="AM">AM->PM</option>
    <option value="AM">PM->AM</option>
    <option value="AM">PM->PM</option>

  </select><br>

  <label for="result">Hrs Worked:</label>
  <input type="text" id="txtresult" placeholder="Result"></p><br>
</div>

请让我知道我做错了什么。

Answer 1

在您的 HTML 中，您使用 value="AM" 定义了所有 <option>，除了第一个（其值为空）。因此，您的 if 在 setValue:

if (choice==='AM->PM' ){
    result =  (12-Start)+(End);
}

永远不会评估为 true，因此永远不会将 result 设置为一个值；它会保持 undefined 因为你用 let result;.

初始化它

我还想指出，您在 sum 函数中声明了 const choice = select.value;，但并未在 <select> 的 change 回调中更改其值=].实际上，choice 的值将始终是执行 sum 时选择的值，并且在用户更改 select 后执行 setValue 时不会更改盒子.

尝试将您的 setValue 函数更改为：

function setValue(){
    choice = select.value;
    if (choice==='AM->PM' ){
            result =  (12-Start)+(End);
    }
    console.log(result);
    document.getElementById('txtresult').value = result;
}

和您的 HTML option 对此：

<option value="">--AM/PM--</option>
<option value="AM->AM">AM->AM</option>
<option value="AM->PM">AM->PM</option>
<option value="PM->AM">PM->AM</option>
<option value="PM->PM">PM->PM</option>

使用 javascript 进行表单操作

Form Manipulation using javascript

javascript

forms