开发者问题收集

使用 javascript 获取 HTML 元素的值

2017-07-14
308
javascript

我用 JavaScript 制作了一个秒表，并通过 HTML 的 h1 标签显示它，我能够使用以下 JS 代码获取它的文本内容。 

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

这可以完美地获取值，但问题是当我点击开始按钮运行秒表时，如果然后单击 getTime 按钮，它仍然会获取 h1 标签的静态值，即 00:00:00，这不是我想要的。我想获取不断更新的 h1 标签的当前值。 假设我点击了“开始”按钮，然后 10 秒后，如果我点击 getTime，我希望 00:00:10 作为 getTimer 变量的值，但在我的情况下，它只显示 00:00:00。

这是 工作 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,
		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();
  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>

如何获取 h1 标签的当前值？我正在寻找纯 JS 解决方案

提前感谢您的帮助。

3个回答

当用户点击按钮时，您必须获取 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>
Barmar
2017-07-14

我明白您的问题。 getTimer 是一个字符串，其值在第一次创建变量时创建并锁定。相反，您应该将 getTimer 定义为函数，并使用 getTimer() 而不是 getTimer 来调用它。 

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

现在，当像这样调用函数时，函数内部的代码将运行： 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
		getTimer = function () { return 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();
  alert(getTimer()); // now call the function instead just using the value
});
<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>
Rico Kahler
2017-07-14

我将使用 innerHTML 进行 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,
		getTimer = document.getElementById('time'),
		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();
  alert(getTimer.innerHTML);
});
<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>
Oleg Markoff
2017-07-14