有什么办法可以使用javascript更改文本，从而使CSS继续正常工作？

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 .

Answer 1

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> 

Answer 2

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> 

Answer 3

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.