JavaScriptでHTML要素の値を取得する

Question

JavaScriptでストップウォッチを作成しました.HTMLのh1タグを使ってストップウォッチを表示しました.JS内で次のコードでtextContentを取得できます。

完全に値を取得しますが、私はストップウォッチを実行するために、スタートボタンを押したときに、次にクリックgetTimeボタンがまだ00:00:00 H1タグの静的な値をフェッチした場合、問題がある

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

、これは私が探しているものではありません。常に更新しているh1タグの現在の値を取得したい。 私が開始ボタンをクリックした後、getTimeをクリックすると10秒後にgetTimer変数の値として00:00:10を入力したいと思いますが、私の場合は00:00:00しか表示されません。

こちらのデモはworking codepenです。

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>

どのように私は、H1タグの現在の値を得るのですか？私は純粋なJSのソリューションを探しています

ご協力ありがとうございます。

Answer 1

ユーザーがボタンをクリックしたときに、DIVの新しいコンテンツを取得する必要があります。

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

私はあなたの問題で問題を参照してください。 getTimerは文字列であり、変数が最初に作成されたときに値が作成され、ロックされます。その代わりに、getTimerを関数として定義し、の代わりにgetTimer()を呼び出す必要があります。

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

：getTimer()

は、以下の変更されたコードを参照してください：関数は次のように呼び出されたときに、今のコード内部関数が実行されます

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

getTiにinnerHTMLを使用しますマー

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>