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 的元素。 ids 必须是唯一的。

从以下位置更改或删除您的 id 属性： <label id="hora" for="hora"></label>

Answer 2

问题与解决方案

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

---

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

要获取 ID 为 hora 的选择的值，请使用 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 时使用了两个 undefined 值，这两个值都变为 0，因此它在 0 小时和 0 分钟内运行了该函数，因此它看起来好像被立即调用了。

Answer 3

一些事情。

1. 从

   更改此行

   <label id="label" for="hora"></label>
   

到

    <label id="hora-label" for="hora"></label>

原因：ID 在页面上必须是唯一的。

1. 将此行更改为：

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

到：

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

解决语法错误。

1. 从以下位置更改此 HTML：

   <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"  />
   

到：

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

访问输入的语法不正确，可以在函数本身访问输入，如下所示：

    function Acordar() {
      var sH = document.getElementById("hora");
      var sM = document.getElementById("minuto");
      var nH = Number(sH.options[sH.selectedIndex].text);
      var nM = Number(sM.options[sM.selectedIndex].text);
      var now = new Date();
      var espera = new Date(now.getFullYear(), now.getMonth(), now.getDate(), nH, nM, 0, 0) - now;

      if (espera < 0) {
        espera += 86400000;
      }

      setTimeout(function() {
        document.getElementById("dummy").innerHTML = document.getElementById("dummy").innerHTML="<embed src=\""+'starwars.mp3'+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
      }, espera);
    }