在div中跨越innerHTML

Question

嗨，我一直在尋找幾天，我真的找不到任何東西，我想要的是在div中調用span並獲得跨越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;這樣的東西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;
  }  
}

小提琴

---

更新：更優雅一點：

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

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

小提琴

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