在 div 中获取一个 span innerHTML

Question

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

跨度如下所示：

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，而是使用 class）：

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

然后：

[编辑]（已删除警告 @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

在 div 中获取一个 span innerHTML

Get a spans innerHTML inside a div

javascript

html

css

timer

innerhtml