Question

我有一个表单，用户可以输入完成特定任务所花费的时间（分钟和秒），我想将此输入推送到一个空数组中。

当前，当我尝试将阵列打印到控制台时，它说该阵列中有一个值，但是不显示该值。


<form id="mile1">
    Mile 1 Time: <input mile1="mile1" type="time" size="20">
</form>
<br>
<button class="test" onclick="storeValue()">test</button>


var userTimes = [];

let storeValue = function() {
    let inputTime = document.getElementById('mile1').value;
    userTimes.push(userTimes);
}

我想知道表单中输入的值已存储在数组中，以后可以用于进一步的计算。任何帮助将不胜感激。

Answer 1

采用输入元素的值而不是形式。然后您需要将inputTime推入数组。

userTimes = [];

let storeValue = function () {

    let inputTime = document.getElementById('mile1').value;

    userTimes.push(inputTime);
    console.log(userTimes);

}

<form >
    Mile 1 Time: <input id="mile1" type= 'time' size='20'> </form> <br>

<button class='test' onclick="storeValue()">test</button>

Answer 2

我创建了一个片段供参考，该片段当前正在工作。为了使其正常工作，需要更新两件事。

标识mile1必须在输入中，而不是在表单上。
.push应该推送值，而不是数组。

希望这会有所帮助！

userTimes = [];

let storeValue = function () {

    let inputTime = document.getElementById('mile1').value;

    userTimes.push(inputTime);
    console.log(userTimes);
}

<form>
    Mile 1 Time: <input id="mile1" mile1 = 'mile1' type= 'time' size='20'> </form> <br>

<button class='test' onclick="storeValue()">test</button>

Answer 3

这是一个包含验证的解决方案：

<form id="mile-form">
    Mile 1 Time: <input id = "mile1" type= "time" size="20">
</form>

<button class="test" onclick="storeValue()">test</button>

const userTimes = [];

const storeValue = function () {
  const mile1 = document.querySelector("#mile1");

  if (!mile1.value || mile1.validationMessage) {
    console.log("Error message here");
  } else {
    userTimes.push(mile1.value);
  }

}

请注意，具有全局变量是一种代码味道。您应该考虑重构以加强userTimes的范围。

如何使用JavaScript将用户输入的时间数据（分钟和秒）附加到数组中？

3 个答案: