我无法从输入中获取值

Question

我正在制作一个基本计时器，这是我的第一个项目，当您按下一个按钮时，代码应该创建 3 个不同的变量，这些变量从各自的输入中获取值，这 3 个代表小时、分钟和秒。

发生的情况是，如果你 console.log 你得到的这 3 个变量中的任何一个由于某种原因未定义，如果你没有这个值，整个倒计时将无法工作。

输入设置为从 html 中的值 = 0 开始，因此它应该至少 return 0，而不是未定义的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="title-container">

    <div class="title"><h1>vamos a meditar un poco...</h1> </div>

</div>

<div class="timer-container">
    <div class="screen-timer"><h2></h2></div>
    <input type="number" min="0" max="60" value="0" id="hours">
    <input type="number" min="0" max="60" value="0" id="minutes">
    <input type="number" min="0" max="60" value="0" id="seconds">
</div>    

<div class="button-container">
    <button class="btn">Iniciar</button>
</div>


<script src="app.js"></script>

这里是 javascript 代码：

   let button = document.querySelector(".btn");
let title = document.querySelector(".title");
let screenTimer = document.querySelector(".screen-timer");

//quotes
let quotes = ["OM MANI PADME HUM", "OM", "BUENOS PENSAMIENTOS, BUENAS PALABRAS, BUENAS ACCIONES", "YO FLUYO COMO EL AGUA"];

//timer start button
button.addEventListener("click", function(){

//time units
let h = document.getElementById("hours").value;
let m = document.getElementById("minutes").value;
let s = document.getElementById("seconds").value;


//title changer
let index = parseInt((Math.random() * quotes.length));
title.innerHTML = `<div class="title"><h1>${quotes[index]}</h1></div>`;

//interval for the timer
let intervalId = setInterval(timer, 1000);

//timer
function timer(){

    if(m > 0 && s <= 59){
        s--;
    } else if(m > 0 && s == 0){
        m--;
        s = 59;
    } else if (h > 0 && m == 0 && s == 0){
        h--;
        m = 59;
        s = 59;
    }

    if (h === 0 && m === 0 && s === 0){
        clearInterval(intervalId)
    }
}


//show the timer on the screen
screenTimer.innerHTML = `<div class="screen-timer"><h2> ${h + ":" + m + ":" + s} </h2></div>`


console.log(h);
console.log(m);
console.log(s);
console.log(h.value);
console.log(m.value);
console.log(s.value);
});

我看到其他解决方案，人们写 document.getElementById(id).onClick 而不是使用 addEventListener("click", ...) 来使按钮在单击时起作用，但我觉得是一样的

Answer 1

前三个 console.logs 产生了正确的结果。

console.log(h);
console.log(m);
console.log(s);

这些已经是值本身而不是 domnodes。

console.log(h.value);
console.log(m.value);
console.log(s.value);

当您尝试访问值本身的属性“值”时，结果未定义。

Answer 2

您在这里正确访问了小时、分钟和秒的值，

let h = document.getElementById("hours").value;
let m = document.getElementById("minutes").value;
let s = document.getElementById("seconds").value;

他们也在您的控制台日志中给出了正确的结果，

console.log(h);
console.log(m);
console.log(s);

您做错的是然后尝试访问这三个不存在的变量的 .value 属性，这就是 undefined 被打印的原因。

使用 h、m、s 变量作为输出。

我无法从输入中获取值

i can't get the value from an input

javascript

timer

countdown