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

Question

我正在使用 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"  />

Answer 1

问题是您传递的小时值是 undefined因为你有两个具有相同 id 的元素。 <强> id s 必须是唯一的。

更改或删除您的id属性来自: <label id="hora" for="hora"></label>