How to insert javascript variable in HTML div

Question

I have this

<div id="chart1" class="bar-chart secondary" data-total="42" animated>
<span class="bar-chart--inner" style="width:42%;"></span>
<span class="bar-chart--text">42% </span>
</div>

and I have one javascript variable var score that I need to assign to data-total="42"and <span class="bar-chart--text">42% </span> My intention is to replace 42 with my javascript variable. I have tried this document.getElementById("chart1").innerHTML =score that I have found from this forum but did not work. Please help.

<div id="chart1" class="bar-chart secondary" data-total="document.getElementById("chart1").innerHTML =score" animated>
    <span class="bar-chart--inner" style="width:42%;"></span>
    <span class="bar-chart--text">42% </span>
    </div>

You're setting a data attribute to a string; you'll want to put the JS somewhere where it'll actually execute, like in a script tag or event handler or something. — Dave Newton
– Dave Newton, Commented Sep 21, 2021 at 13:52
document.querySelector('.bar-chart--text').innerText = "52%" — TJBlackman
– TJBlackman, Commented Sep 21, 2021 at 13:53
@TJBlackman I have just tried it but didn't work. I guess I'm messing up where to place the <script> tags. My tags are in the header section. NB: I have very basic skills in Javascript — alfredmack
– alfredmack, Commented Sep 21, 2021 at 14:00
Yes, the element does not exist yet if you put the script in the head. — Peter Pointer
– Peter Pointer, Commented Sep 21, 2021 at 14:04

Carl Pryke · Accepted Answer · 2021-09-21 13:59:55Z

6

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

get the element in a JS script

then set elem.dataset.total


document.getElementById("chart1").dataset.total = score

<body>
  <div id="chart1" class="bar-chart secondary" data-total="42" animated>
    <span class="bar-chart--inner" style="width:42%;"></span>
    <span class="bar-chart--text">42% </span>
  </div>
  <script type="text/javascript">
    var score = 20

    document.getElementById("chart1").dataset.total = score
  </script>
</body>

For setting the html of an element, you can use innerHTML, just need to select that element in another lookup.


document.querySelector(".bar-chart--text").innerHTML = score

edited Sep 21, 2021 at 13:59

answered Sep 21, 2021 at 13:53

Carl Pryke

3491 silver badge7 bronze badges

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

1 Comment

alfredmack Over a year ago

This worked, Thank you!

Collectives™ on Stack Overflow

How to insert javascript variable in HTML div

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related