Javascript CreateElement(br)

Question

我正在尝试创建一个记分员显示。

我想用html和javascript记录比分。我已经把所有的事情都解决了，我想，但我不明白为什么这条线不打破这里。

相关守则：

var br = document.createElement("br");
var nes = document.createTextNode("---------");
scorechart.appendChild(br);
scorechart.appendChild(nc);
if(tot) {
    scorechart.appendChild(br);
    scorechart.appendChild(nes);
    scorechart.appendChild(br);
    scorechart.appendChild(tot);
}

(完整视图：https://hastebin.com/osuduluvaj.js)

除了“-”

谢谢您:)

Answer 1

document.createElement()创建一个元素，您只能将其附加到DOM一次。如果您想重用您创建的<br>元素，您需要克隆它，并且可以将克隆的副本插入到DOM中。见：Node.cloneNode()。

​

var score = [];

var scoreadd_button = document.querySelector('#scoreadd-button');
var scoreadd_input = document.querySelector('#scoreadd-input');

let sc1 = 0;
let sc2 = 0;

var scorechart = document.querySelector('.scores');

function totalScores() {
    var i;
    var sum = 0;
    for (i = 0; i < score.length; i++) {
        sum += score[i];
    }
    return sum;
}

function newScore(amm) {
    score.push(amm);
    if (!score[1]) {
        var nc = document.createTextNode(amm)
    } else {
        var nc = document.createTextNode(" + " + amm);
    }

    if (sc1 == 0) {
        sc1 = amm;
    } else {
        sc2 = amm;
    }

    if (sc2 != 0) {
        var tot = document.createTextNode("= " + totalScores());
        sc1 = amm;
        sc2 = 0;
    }

    var br = document.createElement("br");
    var nes = document.createTextNode("---------");
    scorechart.appendChild(nc);
    if (tot) {
        scorechart.appendChild(br.cloneNode(true));
        scorechart.appendChild(nes);
        scorechart.appendChild(br.cloneNode(true));
        scorechart.appendChild(tot);
    }
}

scoreadd_button.addEventListener('click', function() {
    var amm = scoreadd_input.value;
    newScore(parseInt(amm, 10));
});

<button id="scoreadd-button">button</button>
<input type="text" id="scoreadd-input" />
<div class="scores"></div>

​

Answer 2

好的，我修正了这个问题，不是使用变量，而是在语句中创建元素。

var nes = document.createTextNode("---------");
scorechart.appendChild(document.createElement("br"));
scorechart.appendChild(nc);
if(tot) {
    scorechart.appendChild(document.createElement("br"));
    scorechart.appendChild(nes);
    scorechart.appendChild(document.createElement("br"));
    scorechart.appendChild(tot);
}

谢谢您:)

Answer 3

您只需要为javascript上的每个新创建的元素定义唯一变量，否则它们将被计算为一个变量。

这段代码应该能工作

​

var scorechart = document.querySelector('.scores');
  
    var br = document.createElement("br");
    var br2 = document.createElement("br");
    var nes = document.createTextNode("---------");

        scorechart.appendChild(br);
        scorechart.appendChild(nes);
        scorechart.appendChild(br2);

<span class="scores">
text before
</span>
after text

​