HTML form button not working properly

Question

I'm building an alarm clock with HTML and JavaScript.

I have a function that plays a song playSound(soundfile), and another function that calls the playSound function at a given time Acordar(h, m). Both of these are working fine on their own.

I also have a form where I input an hour and a minute and when I press the save button it calls Acordar with the hour and minute given.

The problem is, that when I call Acordar in this way, the sound plays immediately (it does not wait the requested amount of time before playing the sound). However, as I previously mentioned, both functions work fine on their own.

Here is my code:

The playSound function:

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

The Acordar function:

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);
}

And here is my HTML form:

<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

A few things.

1. change this line from

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

to

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

Reason: IDs must be unique on the page.

2. Change this line from:

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

to:

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

To solve for a syntax error.

3. Change this HTML from:

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

to:

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

The syntax for accessing the inputs is incorrect, and the inputs can be accessed at the function itself, like so:

    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);
    }

Answer 2

Problems & Solutions

Firstly, you need to remove the id of hora from your first <label> for anything to work. An id is a unique identifier, and it is thus required that you only use the same id once on any given page.

---

You can't access HTML elements as you do in the form.

To get the value of the select with the ID of hora, you use hora.value, whereas instead you should use document.getElementById("hora").value.

The syntax that you have used is what would be used if you were trying to call a method on a variable. However, in this scenario, the variable does not exist.

It would work if you had declared variables in your JavaScript code (after everything has loaded).

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

Or if you simply used:

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

So, why did the sound play instantly?

The variables hora and minuto were not defined, and you tried to access them. This returns a value of undefined in JavaScript.

When you try to use undefined in a context where you would require a number, it converts it into 0.

So, you called Acordar with two values of undefined, which both became 0, so it ran the function in 0 hours and 0 minutes, and thus it looked as if it were called instantly.

Answer 3

The problem is that the hour value you are passing is undefined because you have two elements with same id. ids must be unique.

Change or remove your id attribue from : <label id="hora" for="hora"></label>