CODEWITHSUNDEEP
javascript
Itzdlg
Itzdlg

Reputation: 45

Javascript CreateElement(br)

I am trying to create a score keeper display.

I want to keep track of the score using html and javascript. I have everything figured out I think but I can't figure out why the line doesn't break here.

Relevant code:

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);
}

(For a full view: https://hastebin.com/osuduluvaj.js)

It breaks for everything but the "------" part: https://media.discordapp.net/attachments/240883852350980096/497957073481629696/sAAAAASUVORK5CYII.png (I cant upload images yet as a new member)

Thank you :)

Upvotes: 0

Views: 5765

Answers (3)

dossy
dossy

Reputation: 1679

document.createElement() creates a single element, which you can only append to the DOM once. If you want to reuse the <br> element you created, you need to clone it and you can insert the cloned copy into the DOM. See: 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>

Upvotes: 4

Drunken M
Drunken M

Reputation: 2714

You just need to defined unique variables for each new created element on javascript, otherwise they will counted as one.

This code should works

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

Upvotes: 0

Itzdlg
Itzdlg

Reputation: 45

Okay so I fixed the issue by instead of using a variable just creating the element in the statement.

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);
}

Thank you :)

Upvotes: 0

Related Questions