2. Algorithm
  3. How to insert javascript variable in HTML div - Stack Overflow

How to insert javascript variable in HTML div - Stack Overflow

admin2025-04-20  0

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>

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>
  • javascript
Share Improve this question edited Jan 5, 2022 at 20:02 alfredmack asked Sep 21, 2021 at 13:49 alfredmackalfredmack 1032 silver badges12 bronze badges 7
  • 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 Commented Sep 21, 2021 at 13:52
  • document.querySelector('.bar-chart--text').innerText = "52%" – 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 Commented Sep 21, 2021 at 14:00
  • Put your JS Code to the end. Above the closing body tag. – Maik Lowrey Commented Sep 21, 2021 at 14:03
  • Yes, the element does not exist yet if you put the script in the head. – Peter Pointer Commented Sep 21, 2021 at 14:04
 |  Show 2 more ments

1 Answer 1

Reset to default 6

https://developer.mozilla/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
转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745127894a286534.html

How to insert javascript variable in HTML divStack Overflow

最新回复(0)