Can't update textContent of (that is assigned to a variable) from within the callback

I have a simple HTML page

enter image description here

When I press on buttons "Player 1" and "Player 2", I want changes to reflect on the page. In console scores go up, everything's fine, but why page doesn't update the changed score? (let p1score and let p2score)

Here's my code, thanks !

const p1button = document

    .querySelector('#p1')

    .addEventListener('click', scoreUp);

const p2button = document

    .querySelector('#p2')

    .addEventListener('click', scoreUp);



let p2score = document.querySelector('#p2score').textContent;

let p1score = document.querySelector('#p1score').textContent;



function scoreUp(e) {

    if (e.target.textContent === 'Player 1') {

        p1score++;

        console.log(p1score);

    } else {

        p2score++;

        console.log(p2score);

    }

}

asked Nov 22 '18 at 4:58

max23701

414

You need to include your code instead of image, please add your full code.

– Just code
Nov 22 '18 at 5:03

2

p2score and p1score are just references. Adding them won't reflect on page. You need to assign it back. It's not a two-way binding thing.

– wannadream
Nov 22 '18 at 5:04

add a comment |

I have a simple HTML page

enter image description here

Here's my code, thanks !

const p1button = document

    .querySelector('#p1')

    .addEventListener('click', scoreUp);

const p2button = document

    .querySelector('#p2')

    .addEventListener('click', scoreUp);



let p2score = document.querySelector('#p2score').textContent;

let p1score = document.querySelector('#p1score').textContent;



function scoreUp(e) {

    if (e.target.textContent === 'Player 1') {

        p1score++;

        console.log(p1score);

    } else {

        p2score++;

        console.log(p2score);

    }

}

asked Nov 22 '18 at 4:58

max23701

414

You need to include your code instead of image, please add your full code.

– Just code
Nov 22 '18 at 5:03

2

p2score and p1score are just references. Adding them won't reflect on page. You need to assign it back. It's not a two-way binding thing.

– wannadream
Nov 22 '18 at 5:04

add a comment |

I have a simple HTML page

enter image description here

Here's my code, thanks !

const p1button = document

    .querySelector('#p1')

    .addEventListener('click', scoreUp);

const p2button = document

    .querySelector('#p2')

    .addEventListener('click', scoreUp);



let p2score = document.querySelector('#p2score').textContent;

let p1score = document.querySelector('#p1score').textContent;



function scoreUp(e) {

    if (e.target.textContent === 'Player 1') {

        p1score++;

        console.log(p1score);

    } else {

        p2score++;

        console.log(p2score);

    }

}

asked Nov 22 '18 at 4:58

max23701

414

I have a simple HTML page

enter image description here

Here's my code, thanks !

const p1button = document

    .querySelector('#p1')

    .addEventListener('click', scoreUp);

const p2button = document

    .querySelector('#p2')

    .addEventListener('click', scoreUp);



let p2score = document.querySelector('#p2score').textContent;

let p1score = document.querySelector('#p1score').textContent;



function scoreUp(e) {

    if (e.target.textContent === 'Player 1') {

        p1score++;

        console.log(p1score);

    } else {

        p2score++;

        console.log(p2score);

    }

}

javascript dom

asked Nov 22 '18 at 4:58

max23701

414

asked Nov 22 '18 at 4:58

max23701

414

asked Nov 22 '18 at 4:58

max23701

414

asked Nov 22 '18 at 4:58

max23701

414

asked Nov 22 '18 at 4:58

max23701

414

You need to include your code instead of image, please add your full code.

– Just code
Nov 22 '18 at 5:03

2

p2score and p1score are just references. Adding them won't reflect on page. You need to assign it back. It's not a two-way binding thing.

– wannadream
Nov 22 '18 at 5:04

add a comment |

You need to include your code instead of image, please add your full code.

– Just code
Nov 22 '18 at 5:03

2

p2score and p1score are just references. Adding them won't reflect on page. You need to assign it back. It's not a two-way binding thing.

– wannadream
Nov 22 '18 at 5:04

You need to include your code instead of image, please add your full code.

– Just code
Nov 22 '18 at 5:03

p2score and p1score are just references. Adding them won't reflect on page. You need to assign it back. It's not a two-way binding thing.

– wannadream
Nov 22 '18 at 5:04

add a comment |

3 Answers
3

active

oldest

votes

When you do let p1score = document.querySelector('#p1score').textContent; you are effectively saving the value of the text content, not a reference to that value. Thus, p1score and p2score hold their own unique copies of the values (integers) of the text content.

So, when you increment p1score and p2score you are only incrementing the values in held by these variables. Thus, once you've incremented your value, you should set the text content to be the incremented value by doing

pScoreOneElem.textContent = p1score;

pScoreTwoElem.textContent = p2score;

This will effectively update the text content by changing its value to reflect the changes to p1score and p2score:

const p1button = document

    .querySelector('#p1')

    .addEventListener('click', scoreUp);

const p2button = document

    .querySelector('#p2')

    .addEventListener('click', scoreUp);



let pScoreOneElem = document.querySelector('#p1score');

let pScoreTwoElem = document.querySelector('#p2score');



let p2score = pScoreTwoElem.textContent;

let p1score = pScoreOneElem.textContent;



function scoreUp(e) {

    if (e.target.textContent === 'Player 1') {

        p1score++;

        pScoreOneElem.textContent = p1score;

        console.log(p1score);

    } else {

        p2score++;

        pScoreTwoElem.textContent = p2score;

        console.log(p2score);

    }

}

<button id="p1">Player 1</button>

<button id="p2">Player 2</button>



<br />

<div class="player-scores">

  Player 1 Score: <span id="p1score">0</span>

  <br />

  Player 2 Score: <span id="p2score">0</span>

</div>

edited Nov 22 '18 at 5:55

answered Nov 22 '18 at 5:07

Nick Parsons

8,5952824

That's a lot of repeated DOM querying. I'd just save references to the two  elements

– Phil
Nov 22 '18 at 5:08

@Phil You're right, updated ;)

– Nick Parsons
Nov 22 '18 at 5:10

add a comment |

let p2score = document.querySelector('#p2score').textContent only assigns the value of textContent to the score variable. That value is no longer connected to the element text content property. You must reference the element instead

const p1button = document

    .querySelector('#p1')

    .addEventListener('click', scoreUp);

const p2button = document

    .querySelector('#p2')

    .addEventListener('click', scoreUp);



let p1 = document.querySelector('#p1score');

let p2 = document.querySelector('#p2score');

let p1score = p1.textContent;

let p2score = p2.textContent;



function scoreUp(e) {

    if (e.target.textContent === 'Player 1') {

        p1.textContent = p1score++;

        console.log(p1.textContent);

    } else {

        p2.textContent = p2score++;

        console.log(p2.textContent);

    }

}

answered Nov 22 '18 at 5:08

Abana Clara

1,646919

add a comment |

You need to set scores to p1score and p2score elements like so :

if (e.target.textContent === 'Player 1') {

    p1score++;

    document.querySelector('#p1score').textContent = p1score;

    console.log(p1score);

} else {

    p2score++;

    document.querySelector('#p2score').textContent = p2score;

    console.log(p2score);

}

answered Nov 22 '18 at 5:10

bill

664

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53424150%2fcant-update-textcontent-of-span-that-is-assigned-to-a-variable-from-within%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

pScoreOneElem.textContent = p1score;

pScoreTwoElem.textContent = p2score;

This will effectively update the text content by changing its value to reflect the changes to p1score and p2score:

const p1button = document

    .querySelector('#p1')

    .addEventListener('click', scoreUp);

const p2button = document

    .querySelector('#p2')

    .addEventListener('click', scoreUp);



let pScoreOneElem = document.querySelector('#p1score');

let pScoreTwoElem = document.querySelector('#p2score');



let p2score = pScoreTwoElem.textContent;

let p1score = pScoreOneElem.textContent;



function scoreUp(e) {

    if (e.target.textContent === 'Player 1') {

        p1score++;

        pScoreOneElem.textContent = p1score;

        console.log(p1score);

    } else {

        p2score++;

        pScoreTwoElem.textContent = p2score;

        console.log(p2score);

    }

}

<button id="p1">Player 1</button>

<button id="p2">Player 2</button>



<br />

<div class="player-scores">

  Player 1 Score: <span id="p1score">0</span>

  <br />

  Player 2 Score: <span id="p2score">0</span>

</div>

edited Nov 22 '18 at 5:55

answered Nov 22 '18 at 5:07

Nick Parsons

8,5952824

That's a lot of repeated DOM querying. I'd just save references to the two  elements

– Phil
Nov 22 '18 at 5:08

@Phil You're right, updated ;)

– Nick Parsons
Nov 22 '18 at 5:10

add a comment |

pScoreOneElem.textContent = p1score;

pScoreTwoElem.textContent = p2score;

This will effectively update the text content by changing its value to reflect the changes to p1score and p2score:

const p1button = document

    .querySelector('#p1')

    .addEventListener('click', scoreUp);

const p2button = document

    .querySelector('#p2')

    .addEventListener('click', scoreUp);



let pScoreOneElem = document.querySelector('#p1score');

let pScoreTwoElem = document.querySelector('#p2score');



let p2score = pScoreTwoElem.textContent;

let p1score = pScoreOneElem.textContent;



function scoreUp(e) {

    if (e.target.textContent === 'Player 1') {

        p1score++;

        pScoreOneElem.textContent = p1score;

        console.log(p1score);

    } else {

        p2score++;

        pScoreTwoElem.textContent = p2score;

        console.log(p2score);

    }

}

<button id="p1">Player 1</button>

<button id="p2">Player 2</button>



<br />

<div class="player-scores">

  Player 1 Score: <span id="p1score">0</span>

  <br />

  Player 2 Score: <span id="p2score">0</span>

</div>

edited Nov 22 '18 at 5:55

answered Nov 22 '18 at 5:07

Nick Parsons

8,5952824

That's a lot of repeated DOM querying. I'd just save references to the two  elements

– Phil
Nov 22 '18 at 5:08

@Phil You're right, updated ;)

– Nick Parsons
Nov 22 '18 at 5:10

add a comment |

pScoreOneElem.textContent = p1score;

pScoreTwoElem.textContent = p2score;

This will effectively update the text content by changing its value to reflect the changes to p1score and p2score:

const p1button = document

    .querySelector('#p1')

    .addEventListener('click', scoreUp);

const p2button = document

    .querySelector('#p2')

    .addEventListener('click', scoreUp);



let pScoreOneElem = document.querySelector('#p1score');

let pScoreTwoElem = document.querySelector('#p2score');



let p2score = pScoreTwoElem.textContent;

let p1score = pScoreOneElem.textContent;



function scoreUp(e) {

    if (e.target.textContent === 'Player 1') {

        p1score++;

        pScoreOneElem.textContent = p1score;

        console.log(p1score);

    } else {

        p2score++;

        pScoreTwoElem.textContent = p2score;

        console.log(p2score);

    }

}

<button id="p1">Player 1</button>

<button id="p2">Player 2</button>



<br />

<div class="player-scores">

  Player 1 Score: <span id="p1score">0</span>

  <br />

  Player 2 Score: <span id="p2score">0</span>

</div>

edited Nov 22 '18 at 5:55

answered Nov 22 '18 at 5:07

Nick Parsons

8,5952824

pScoreOneElem.textContent = p1score;

pScoreTwoElem.textContent = p2score;

This will effectively update the text content by changing its value to reflect the changes to p1score and p2score:

const p1button = document

    .querySelector('#p1')

    .addEventListener('click', scoreUp);

const p2button = document

    .querySelector('#p2')

    .addEventListener('click', scoreUp);



let pScoreOneElem = document.querySelector('#p1score');

let pScoreTwoElem = document.querySelector('#p2score');



let p2score = pScoreTwoElem.textContent;

let p1score = pScoreOneElem.textContent;



function scoreUp(e) {

    if (e.target.textContent === 'Player 1') {

        p1score++;

        pScoreOneElem.textContent = p1score;

        console.log(p1score);

    } else {

        p2score++;

        pScoreTwoElem.textContent = p2score;

        console.log(p2score);

    }

}

<button id="p1">Player 1</button>

<button id="p2">Player 2</button>



<br />

<div class="player-scores">

  Player 1 Score: <span id="p1score">0</span>

  <br />

  Player 2 Score: <span id="p2score">0</span>

</div>

const p1button = document

    .querySelector('#p1')

    .addEventListener('click', scoreUp);

const p2button = document

    .querySelector('#p2')

    .addEventListener('click', scoreUp);



let pScoreOneElem = document.querySelector('#p1score');

let pScoreTwoElem = document.querySelector('#p2score');



let p2score = pScoreTwoElem.textContent;

let p1score = pScoreOneElem.textContent;



function scoreUp(e) {

    if (e.target.textContent === 'Player 1') {

        p1score++;

        pScoreOneElem.textContent = p1score;

        console.log(p1score);

    } else {

        p2score++;

        pScoreTwoElem.textContent = p2score;

        console.log(p2score);

    }

}

<button id="p1">Player 1</button>

<button id="p2">Player 2</button>



<br />

<div class="player-scores">

  Player 1 Score: <span id="p1score">0</span>

  <br />

  Player 2 Score: <span id="p2score">0</span>

</div>

const p1button = document

    .querySelector('#p1')

    .addEventListener('click', scoreUp);

const p2button = document

    .querySelector('#p2')

    .addEventListener('click', scoreUp);



let pScoreOneElem = document.querySelector('#p1score');

let pScoreTwoElem = document.querySelector('#p2score');



let p2score = pScoreTwoElem.textContent;

let p1score = pScoreOneElem.textContent;



function scoreUp(e) {

    if (e.target.textContent === 'Player 1') {

        p1score++;

        pScoreOneElem.textContent = p1score;

        console.log(p1score);

    } else {

        p2score++;

        pScoreTwoElem.textContent = p2score;

        console.log(p2score);

    }

}

<button id="p1">Player 1</button>

<button id="p2">Player 2</button>



<br />

<div class="player-scores">

  Player 1 Score: <span id="p1score">0</span>

  <br />

  Player 2 Score: <span id="p2score">0</span>

</div>

edited Nov 22 '18 at 5:55

answered Nov 22 '18 at 5:07

Nick Parsons

8,5952824

edited Nov 22 '18 at 5:55

answered Nov 22 '18 at 5:07

Nick Parsons

8,5952824

answered Nov 22 '18 at 5:07

Nick Parsons

8,5952824

answered Nov 22 '18 at 5:07

Nick Parsons

8,5952824

That's a lot of repeated DOM querying. I'd just save references to the two  elements

– Phil
Nov 22 '18 at 5:08

@Phil You're right, updated ;)

– Nick Parsons
Nov 22 '18 at 5:10

add a comment |

That's a lot of repeated DOM querying. I'd just save references to the two  elements

– Phil
Nov 22 '18 at 5:08

@Phil You're right, updated ;)

– Nick Parsons
Nov 22 '18 at 5:10

That's a lot of repeated DOM querying. I'd just save references to the two  elements

– Phil
Nov 22 '18 at 5:08

@Phil You're right, updated ;)

– Nick Parsons
Nov 22 '18 at 5:10

add a comment |

const p1button = document

    .querySelector('#p1')

    .addEventListener('click', scoreUp);

const p2button = document

    .querySelector('#p2')

    .addEventListener('click', scoreUp);



let p1 = document.querySelector('#p1score');

let p2 = document.querySelector('#p2score');

let p1score = p1.textContent;

let p2score = p2.textContent;



function scoreUp(e) {

    if (e.target.textContent === 'Player 1') {

        p1.textContent = p1score++;

        console.log(p1.textContent);

    } else {

        p2.textContent = p2score++;

        console.log(p2.textContent);

    }

}

answered Nov 22 '18 at 5:08

Abana Clara

1,646919

add a comment |

const p1button = document

    .querySelector('#p1')

    .addEventListener('click', scoreUp);

const p2button = document

    .querySelector('#p2')

    .addEventListener('click', scoreUp);



let p1 = document.querySelector('#p1score');

let p2 = document.querySelector('#p2score');

let p1score = p1.textContent;

let p2score = p2.textContent;



function scoreUp(e) {

    if (e.target.textContent === 'Player 1') {

        p1.textContent = p1score++;

        console.log(p1.textContent);

    } else {

        p2.textContent = p2score++;

        console.log(p2.textContent);

    }

}

answered Nov 22 '18 at 5:08

Abana Clara

1,646919

add a comment |

const p1button = document

    .querySelector('#p1')

    .addEventListener('click', scoreUp);

const p2button = document

    .querySelector('#p2')

    .addEventListener('click', scoreUp);



let p1 = document.querySelector('#p1score');

let p2 = document.querySelector('#p2score');

let p1score = p1.textContent;

let p2score = p2.textContent;



function scoreUp(e) {

    if (e.target.textContent === 'Player 1') {

        p1.textContent = p1score++;

        console.log(p1.textContent);

    } else {

        p2.textContent = p2score++;

        console.log(p2.textContent);

    }

}

answered Nov 22 '18 at 5:08

Abana Clara

1,646919

const p1button = document

    .querySelector('#p1')

    .addEventListener('click', scoreUp);

const p2button = document

    .querySelector('#p2')

    .addEventListener('click', scoreUp);



let p1 = document.querySelector('#p1score');

let p2 = document.querySelector('#p2score');

let p1score = p1.textContent;

let p2score = p2.textContent;



function scoreUp(e) {

    if (e.target.textContent === 'Player 1') {

        p1.textContent = p1score++;

        console.log(p1.textContent);

    } else {

        p2.textContent = p2score++;

        console.log(p2.textContent);

    }

}

answered Nov 22 '18 at 5:08

Abana Clara

1,646919

answered Nov 22 '18 at 5:08

Abana Clara

1,646919

answered Nov 22 '18 at 5:08

Abana Clara

1,646919

answered Nov 22 '18 at 5:08

Abana Clara

1,646919

add a comment |

You need to set scores to p1score and p2score elements like so :

if (e.target.textContent === 'Player 1') {

    p1score++;

    document.querySelector('#p1score').textContent = p1score;

    console.log(p1score);

} else {

    p2score++;

    document.querySelector('#p2score').textContent = p2score;

    console.log(p2score);

}

answered Nov 22 '18 at 5:10

bill

664

add a comment |

You need to set scores to p1score and p2score elements like so :

if (e.target.textContent === 'Player 1') {

    p1score++;

    document.querySelector('#p1score').textContent = p1score;

    console.log(p1score);

} else {

    p2score++;

    document.querySelector('#p2score').textContent = p2score;

    console.log(p2score);

}

answered Nov 22 '18 at 5:10

bill

664

add a comment |

You need to set scores to p1score and p2score elements like so :

if (e.target.textContent === 'Player 1') {

    p1score++;

    document.querySelector('#p1score').textContent = p1score;

    console.log(p1score);

} else {

    p2score++;

    document.querySelector('#p2score').textContent = p2score;

    console.log(p2score);

}

answered Nov 22 '18 at 5:10

bill

664

You need to set scores to p1score and p2score elements like so :

if (e.target.textContent === 'Player 1') {

    p1score++;

    document.querySelector('#p1score').textContent = p1score;

    console.log(p1score);

} else {

    p2score++;

    document.querySelector('#p2score').textContent = p2score;

    console.log(p2score);

}

answered Nov 22 '18 at 5:10

bill

664

answered Nov 22 '18 at 5:10

bill

664

answered Nov 22 '18 at 5:10

bill

664

answered Nov 22 '18 at 5:10

bill

664

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu