erhalten Wert von HTML-Element mit Javascript

Question

Ich habe eine Stoppuhr in JavaScript gemacht, und ich zeige es durch h1 Tag von HTML und ich bin in der Lage, es ist TextContent mit folgendem Code in JS.

<h1 id="time">00:00:00</h1>  
var h1 = document.getElementById('time'), 
     getTimer = h1.textContent; 

, die den Wert perfekt holt, aber das Problem ist, wenn ich die Start-Taste drücken Sie die Stoppuhr laufen und dann holt, wenn klicken getTime Taste, um es noch den statischen Wert von h1-Tag, 00.00.00 ist, was ich nicht suche. Ich möchte den aktuellen Wert von h1-Tag holen, der ständig aktualisiert wird. Angenommen, ich klicke auf Start und dann nach 10 Sekunden, wenn ich auf GetTime klicke, will ich 00:00:10 als Wert von getTimer Variable, aber in meinem Fall zeigt es nur 00:00:00.

Hier ist die working codepen Demo für die gleiche.

var h1 = document.getElementById('time'), 
 
    start = document.getElementById('start'), 
 
    stop = document.getElementById('stop'), 
 
    clear = document.getElementById('clear'), 
 
    seconds = 0, minutes = 0, hours = 0, 
 
    t, 
 
\t \t getTimer = document.getElementById('time').textContent, 
 
\t \t fetchVal = document.getElementById('fetchVal'), 
 
\t \t form = document.getElementById('form'); 
 

 
function add() { 
 
    seconds++; 
 
    if (seconds >= 60) { 
 
     seconds = 0; 
 
     minutes++; 
 
     if (minutes >= 60) { 
 
      minutes = 0; 
 
      hours++; 
 
     } 
 
    } 
 
    
 
    h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds); 
 

 
    timer(); 
 
} 
 
function timer() { 
 
    t = setTimeout(add, 1000); 
 
} 
 
/* Start button */ 
 
start.onclick = timer; 
 

 
/* Stop button */ 
 
stop.onclick = function() { 
 
    clearTimeout(t); 
 
} 
 

 
/* Clear button */ 
 
clear.onclick = function() { 
 
    h1.textContent = "00:00:00"; 
 
    seconds = 0; minutes = 0; hours = 0; 
 
} 
 
form.addEventListener('submit', function(e){ 
 
\t e.preventDefault(); 
 
    alert(getTimer); 
 
});

<form action="#" id="form"> 
 
\t <h1 id="time">00:00:00</h1> 
 
<button id="start">start</button> 
 
<button id="stop">stop</button> 
 
<button id="clear">clear</button> 
 
<button type="submit" id="fetchVal">Get Time</button> 
 
</form>

Wie kann ich den aktuellen Wert von h1-Tag bekommen? Ich suche eine Lösung in reinem JS

Vielen Dank im Voraus für die Hilfe.

Answer 1

Sie müssen den neuen Inhalt des DIV abrufen, wenn der Benutzer auf die Schaltfläche klickt.

var h1 = document.getElementById('time'), 
 
    start = document.getElementById('start'), 
 
    stop = document.getElementById('stop'), 
 
    clear = document.getElementById('clear'), 
 
    seconds = 0, 
 
    minutes = 0, 
 
    hours = 0, 
 
    t, 
 
    getTimer = document.getElementById('time').textContent, 
 
    fetchVal = document.getElementById('fetchVal'), 
 
    form = document.getElementById('form'); 
 

 
function add() { 
 
    seconds++; 
 
    if (seconds >= 60) { 
 
    seconds = 0; 
 
    minutes++; 
 
    if (minutes >= 60) { 
 
     minutes = 0; 
 
     hours++; 
 
    } 
 
    } 
 

 
    h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds); 
 

 
    timer(); 
 
} 
 

 
function timer() { 
 
    t = setTimeout(add, 1000); 
 
} 
 
/* Start button */ 
 
start.onclick = timer; 
 

 
/* Stop button */ 
 
stop.onclick = function() { 
 
    clearTimeout(t); 
 
} 
 

 
/* Clear button */ 
 
clear.onclick = function() { 
 
    h1.textContent = "00:00:00"; 
 
    seconds = 0; 
 
    minutes = 0; 
 
    hours = 0; 
 
} 
 
form.addEventListener('submit', function(e) { 
 
    e.preventDefault(); 
 
    getTimer = document.getElementById('time').textContent; 
 
    alert(getTimer); 
 
});

<form action="#" id="form"> 
 
    <h1 id="time">00:00:00</h1> 
 
    <button id="start">start</button> 
 
    <button id="stop">stop</button> 
 
    <button id="clear">clear</button> 
 
    <button type="submit" id="fetchVal">Get Time</button> 
 
</form>

Answer 2

Ich sehe das Problem mit Ihrem Problem. getTimer ist eine Zeichenfolge und der Wert wird erstellt und gesperrt, wenn die Variable das erste Mal erstellt wird. Stattdessen sollten Sie getTimer als Funktion definieren und mit getTimer() statt getTimer aufrufen.

// very simple change 
getTimer = function() { return document.getElementById('time').textContent }, 

Jetzt ist der Code innerhalb wird die Funktion ausgeführt werden, wenn die Funktion wie folgt aufgerufen wird: getTimer()

Siehe den geänderten Code unter:

var h1 = document.getElementById('time'), 
 
    start = document.getElementById('start'), 
 
    stop = document.getElementById('stop'), 
 
    clear = document.getElementById('clear'), 
 
    seconds = 0, minutes = 0, hours = 0, 
 
    t, 
 
    // change `getTimer` to be a function instead eargly grabbing the value 
 
\t \t getTimer = function() { return document.getElementById('time').textContent}, 
 
\t \t fetchVal = document.getElementById('fetchVal'), 
 
\t \t form = document.getElementById('form'); 
 

 
function add() { 
 
    seconds++; 
 
    if (seconds >= 60) { 
 
     seconds = 0; 
 
     minutes++; 
 
     if (minutes >= 60) { 
 
      minutes = 0; 
 
      hours++; 
 
     } 
 
    } 
 
    
 
    h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds); 
 

 
    timer(); 
 
} 
 
function timer() { 
 
    t = setTimeout(add, 1000); 
 
} 
 
/* Start button */ 
 
start.onclick = timer; 
 

 
/* Stop button */ 
 
stop.onclick = function() { 
 
    clearTimeout(t); 
 
} 
 

 
/* Clear button */ 
 
clear.onclick = function() { 
 
    h1.textContent = "00:00:00"; 
 
    seconds = 0; minutes = 0; hours = 0; 
 
} 
 
form.addEventListener('submit', function(e){ 
 
\t e.preventDefault(); 
 
    alert(getTimer()); // now call the function instead just using the value 
 
});

<form action="#" id="form"> 
 
\t <h1 id="time">00:00:00</h1> 
 
<button id="start">start</button> 
 
<button id="stop">stop</button> 
 
<button id="clear">clear</button> 
 
<button type="submit" id="fetchVal">Get Time</button> 
 
</form>

Answer 3

Ich werde innerHTML für getTi verwenden . mer

var h1 = document.getElementById('time'), 
 
    start = document.getElementById('start'), 
 
    stop = document.getElementById('stop'), 
 
    clear = document.getElementById('clear'), 
 
    seconds = 0, minutes = 0, hours = 0, 
 
    t, 
 
\t \t getTimer = document.getElementById('time'), 
 
\t \t fetchVal = document.getElementById('fetchVal'), 
 
\t \t form = document.getElementById('form'); 
 

 
function add() { 
 
    seconds++; 
 
    if (seconds >= 60) { 
 
     seconds = 0; 
 
     minutes++; 
 
     if (minutes >= 60) { 
 
      minutes = 0; 
 
      hours++; 
 
     } 
 
    } 
 
    
 
    h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds); 
 

 
    timer(); 
 
} 
 
function timer() { 
 
    t = setTimeout(add, 1000); 
 
} 
 
/* Start button */ 
 
start.onclick = timer; 
 

 
/* Stop button */ 
 
stop.onclick = function() { 
 
    clearTimeout(t); 
 
} 
 

 
/* Clear button */ 
 
clear.onclick = function() { 
 
    h1.textContent = "00:00:00"; 
 
    seconds = 0; minutes = 0; hours = 0; 
 
} 
 
form.addEventListener('submit', function(e){ 
 
\t e.preventDefault(); 
 
    alert(getTimer.innerHTML); 
 
});

<form action="#" id="form"> 
 
\t <h1 id="time">00:00:00</h1> 
 
<button id="start">start</button> 
 
<button id="stop">stop</button> 
 
<button id="clear">clear</button> 
 
<button type="submit" id="fetchVal">Get Time</button> 
 
</form>