Is there any way of changing the text using javascript so that the css keeps on working properly?

Question

So basically I want to change the text in a div using javascript. I managed to do it, but I encountered a problem: the tag in which that text was doesn't work anymore for the javascript changed text.

I tried changing .textContent to .innerHTML

<div class="nr11"><h1>11</h1></div>

let lastPosition=document.querySelector('.nr'+player.lastPosition);
lastPosition.textContent=player.lastPosition;

I expect for the text ( number 11 in my case ) to be changed with player.lastPosition while still having active for player.lastPosition.

Robby Cornelissen · Accepted Answer · 2019-09-03 09:42:52Z

2

Just change the selector to select the h1 element instead of the div:

let player = {lastPosition: 11};
let lastPosition = document.querySelector('.nr' + player.lastPosition + '>h1');
// or with a template string: `.nr${player.lastPosition}>h1`
lastPosition.textContent = player.lastPosition;

<div class="nr11"><h1>11</h1></div>

answered Sep 3, 2019 at 9:42

Robby Cornelissen

98.6k23 gold badges154 silver badges180 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jorge Fuentes González · Accepted Answer · 2019-09-03 09:45:35Z

1

You are overwriting the entire <h1>11</h1> content.

What you want to actually do is to change the 11 inside the <h1>, so you need to select that element, instead of selecting the <div> that contains the <h1>:

var player = {
    lastPosition: 11
};
let lastPosition=document.querySelector('.nr'+player.lastPosition+'>h1');
lastPosition.textContent=player.lastPosition;

<div class="nr11"><h1></h1></div>

answered Sep 3, 2019 at 9:45

Jorge Fuentes González

11.9k4 gold badges48 silver badges70 bronze badges

Comments

Marcos Luis Delgado · Accepted Answer · 2019-09-03 09:49:15Z

1

problem here is you are changing the <div> element text, which is: <h1>11</h1> to your new text.

This means you are replacing the whole thing instead of just the value 11. To solve this issue you can simply change where you are querying for the element to:

let lastPosition = document.querySelector('.nr' + player.lastPosition + ' h1');
lastPosition.textContent = player.lastPosition;

This way the variable lastPosition will be the h1 element, therefore you will be changing the h1 textContent.

answered Sep 3, 2019 at 9:49

Marcos Luis Delgado

1,4498 silver badges11 bronze badges

Collectives™ on Stack Overflow

Is there any way of changing the text using javascript so that the css keeps on working properly?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related