Adding innerHTML using Javascript

Question

<div id="ones">
 <span class="dice">&#9856;</span>
 <p>-</p>
 </div>

I am accessing this p tag in inside id=ones. By this Javascript line.

var valueCount = 0;
    var valueCount = document.getElementById('ones').getElementsByTagName('p').textContent;
    valueCount++;
    document.getElementById('ones').getElementsByTagName('p').textContent = valueCount;

on the console, I am getting NaN. Where am I doing wrong???

Get Elements By Tag Name. Elements. You will get all P tags in an array, even if it's just one. — Rickard Elimää
– Rickard Elimää, Commented Oct 3, 2020 at 8:03

mplungjan · Accepted Answer · 2020-10-03 08:05:15Z

1

Instead of using document.getElementById for accessing p tag which doesn't have any id or class attribute.You can use document.querySelector but need a digit in the paragraph that can be converted to a number using for example parseInt

const valueP = document.querySelector('#ones p');
var valueCount = parseInt(valueP.textContent);
valueCount++;
valueP.textContent = valueCount;

<div id="ones">
  <span class="dice">&#9856;</span>
  <p>0</p>
</div>

edited Oct 3, 2020 at 8:05

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Oct 3, 2020 at 8:03

Gnanavel

6241 gold badge9 silver badges22 bronze badges

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

2 Comments

Gnanavel Over a year ago

I was just editing my answer.You had done before that.Thank you so much.

tsm009 Over a year ago

This is also giving NaN value for valueCount. The HTML file cannot be edited it will be same <p>-</p> . It should be done without changing HTML. This answer is the same as was mine.

Amin Azashikov · Accepted Answer · 2020-10-03 08:07:23Z

0

in code you provided we can see that you define valueCount as 0, then we take text data from p tag and assign this value to valueCount so now in valueCount we have '-' string, then we try to increment this incorrect value, so now valueCount is NaN, that's the issue

var valueCount = 0;
var valueCount = document.getElementById('ones').getElementsByTagName('p').textContent;
valueCount++;
document.getElementById('ones').getElementsByTagName('p').textContent = valueCount;

answered Oct 3, 2020 at 8:07

Amin Azashikov

11 bronze badge

2 Comments

mplungjan Over a year ago

document.querySelector("#ones p") is much shorter.

Amin Azashikov Over a year ago

yeah, also in getElementsByTagName('p').textContent textContent is undefined, because getElementsByTagName('p') returns array, so yeah, querySelector is better in this case, you'll get first element from array of elements matched to selector

Collectives™ on Stack Overflow

Adding innerHTML using Javascript

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related