Reputation: 125
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" />
Upvotes: 0
Views: 81
Reputation: 2210
A few things.
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.
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.
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);
}
Upvotes: 1
Reputation: 8762
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" />
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.
Upvotes: 1
Reputation: 2737
The problem is that the hour value you are passing is undefined
because you have two elements with same id
. id
s must be unique.
Change or remove your id
attribue from :
<label id="hora" for="hora"></label>
Upvotes: 3