Pass JavaScript variables to HTML using class

Question

Ultra noob question
I have variable in JavaScript and I have to use it in HTML multiple times
I've tried using document.getElementById("").innerHTML = x, but that requires ID's, and since they can be used only once, it won't be the best solution because I'm using it a lot of times...

<div>
    <h1>Title</h1>
    <!-- I want to pass value of x to all of spans bellow -->
    <p>Value of x: <span class="value-of-x"></span></p>
    <p>Value of x: <span class="value-of-x"></span></p>
    <p>Value of x: <span class="value-of-x"></span></p>
</div>
<script>
    var x = 100;
</script>

I'm really sorry if it's a dumb question, but I'm struggling with this for a solid hour and nothing works for me
Every suggestion welcome

Edit - typos

use document.querySelectorAll() developer.mozilla.org/en-US/docs/Web/API/Document/… — GrafiCode
– GrafiCode, Commented Oct 18, 2022 at 19:28

A3vk · Accepted Answer · 2022-10-18 19:38:13Z

2

You could use document.QuerySelectorAll() to select all spans. It uses a css selector to select all elements that match the selector.

var spans = document.querySelectorAll("span.value-of-x");
spans.forEach((element) => {
    element.innerText = x;
});

With the example above you can select all the spans with the class value-of-x and loop through them to set the innerText of the spans to x.

answered Oct 18, 2022 at 19:38

A3vk

212 bronze badges

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

Collectives™ on Stack Overflow

Pass JavaScript variables to HTML using class

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related