javascript - HTML表单按钮无法正常工作

我正在用HTML和JavaScript构建闹钟。

我有一个播放歌曲playSound(soundfile)的功能，另一个有在给定时间playSound调用Acordar(h, m)功能的功能。两者都可以正常工作。

我也有一个输入小时和分钟的表格，当我按保存按钮时，它会在给定小时和分钟的情况下调用Acordar。

问题是，当我以这种方式调用Acordar时，声音会立即播放（在播放声音之前，它不会等待请求的时间）。但是，正如我前面提到的，这两个功能都可以正常工作。

这是我的代码：

playSound函数：

function playSound(soundfile) {
    document.getElementById("dummy").innerHTML= "<embed
src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}

Acordar函数：

function Acordar(h, m) {
    var now = new Date();
    var espera = new Date(now.getFullYear(), now.getMonth(), now.getDate(), h, m, 0, 0) - now;
    if (espera < 0) {
        espera += 86400000;
    }
    setTimeout(function() {
        document.getElementById("dummy").innerHTML="<embed src=\""+'starwars.mp3'+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
        }, espera);
}

这是我的HTML表单：

<div class="defTime" id="defTime">
<label id="hora" for="hora"></label>
<select size="1" id="hora" name="hora">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="19">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
</select>
<label for="minuto"></label>
<select size="1" id="minuto" name="minuto">
    <option value="0">0</option>
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="15">15</option>
    <option value="20">20</option>
    <option value="25">25</option>
    <option value="30">30</option>
    <option value="35">35</option>
    <option value="40">40</option>
    <option value="45">45</option>
    <option value="50">50</option>
    <option value="55">55</option>
</select>

<button id="save" type="submit" style="border: 0; background: transparent" class="save" onclick="Acordar(hora.value, minuto.value)"><img src="save.png" width="50" height="50" alt="submit"  />

最佳答案

问题与解决方案

首先，您需要从第一个id中删除​​hora的<label>，以使所有工作正常。 id是唯一的标识符，因此要求您在任何给定页面上只使用一次相同的id。



您不能像在表单中那样访问HTML元素。

要获取ID为hora的select的值，请使用hora.value，而应使用document.getElementById("hora").value。

如果尝试在变量上调用方法，则将使用所使用的语法。但是，在这种情况下，该变量不存在。

如果您在JavaScript代码中声明了变量（在加载所有内容之后），它将可以正常工作。

var hora;
var minuto;
window.onload = function() {
    hora = document.getElementById("hora");
    minuto = document.getElementById("minuto");
}

或者，如果您只是简单地使用：

<button id="save" type="submit" style="border: 0; background: transparent" class="save" onclick="Acordar(document.getElementById("hora").value, document.getElementById("minuto").value)"><img src="save.png" width="50" height="50" alt="submit"  />

那么，为什么声音会立即播放？

未定义变量hora和minuto，并且您尝试访问它们。这将返回JavaScript中的undefined值。

当您尝试在需要数字的上下文中使用undefined时，它将转换为0。

因此，您用两个未定义的值调用了Acordar，这两个值都变成了0，因此它在0小时和0分钟内运行了该函数，因此看起来好像是立即在调用它。