在 div 中获取 spans innerHTML

Question

嗨，我已经四处寻找了几天，我真的找不到任何东西，我想要的是在 div 中调用 span 并获取 spans innerHTMTL。 现在代码如下所示：

跨度如下所示：

function createTimer() {
        return document.createElement("span");
    }

如您所见，这个跨度在这个 div 内：

var Stopwatch = {
init: function(elem, options) {

    var timer = createTimer(),
    startButton = createButton("start", start),
    stopButton = createButton("stop", stop),
    resetButton = createButton("reset", reset),
    offset,
    clock,
    interval;

    options = options || {};
    options.delay = options.delay || 1;

    elem.appendChild(timer);
    elem.appendChild(startButton);
    elem.appendChild(stopButton);
    elem.appendChild(resetButton);

    reset();

    function createTimer() {
        return document.createElement("span");
    }

我尝试使用Stopwatch.span.innerHTML、.stopwatch span.innerHTML 和许多其他不同的方式来调用它。您可以使用 .stopwatch span 在 css 中调用它，但这是我需要在按钮或类似 <button id="first" onclick=".stopwatch span.innerHTML;"></button> 的东西中调用它的问题。 但它不起作用！如果有任何问题，请提前询问并感谢！ :)

更新：这是一个凌乱的 JsFiddle http://jsfiddle.net/dzcv9847/

Answer 1

您必须深入研究函数并将var timer = createTimer(), 更改为this.timer = createTimer(); 才能使用Stopwatch.timer.innerHTML; 之类的东西，但是现在创建计时器的方式，无法访问该对象。

这无需更改即可工作：

window.onload=function() {
  var elems = document.getElementsByClassName("basic");
  for (var i = 0, len = elems.length; i < len; i++) {
    Stopwatch.init(elems[i]);
  }
  document.getElementById("first").onclick=function() {
    var val = document.querySelector('.stopwatch > span').innerHTML;
    document.getElementById("lap").innerHTML=val;
  }  
}

FIDDLE

---

更新：更优雅一点：

    lapButton = createButton("lap", lap),
    lapSpan = createTimer(),
    ...
    function lap() {
      lapSpan.innerHTML=timer.innerHTML;
    }

    function reset() {
        clock = 0;
        render(0);
        lap();
    }

FIDDLE

Answer 2

我会亲自在.basic div 元素中插入按钮（不要使用id，而是使用类）：

<div class="basic stopwatch">
    <button class="get-timer" >Get milliseconds and display under this button onclick:</button>
    <div class=output></div>
</div>

然后：

[EDIT]（已删除警告，指出 @mplungjan）

var Stopwatch = {
    init: function(elem, options) {

        // ...
        var getTimerBtn = elem.getElementsByClassName("get-timer")[0];
        var outputElem =  elem.getElementsByClassName("output")[0];
        getTimerBtn.onclick = function(){
            outputElem.innerText = timer.innerText;
        }
        // ...

    }
}

这样，您可以拥有多个 timer 实例（参见演示），而无需分别为每个按钮重复代码。

DEMO