JS How to add variable into span

Question

I'm total newbie, and i want to know how to put a var x into the span tag so i can change the color of the variable.

function wyr()
{
    var x = (Math.floor(Math.random() * 100) + 1);

    if(x <= 33)

        document.getElementById("x").innerHTML = x + '<span style="color:red;">%</span>';

    else if(x >= 34 && x <= 66)

        document.getElementById("x").innerHTML = x + '<span style="color:blue;">%</span>';

    else

        document.getElementById("x").innerHTML = x + '<span style="color:yellow;">%</span>';
}
``

Korgrue · Accepted Answer · 2020-01-07 21:20:39Z

2

You could use a string/template literal.

document.getElementById("x").innerHTML = `<span style="color:red;">${x}</span>`;

Use backticks instead of quotes and your variable goes inside the ${}. Everything between the ticks will get interpolated into a string, including the variable inside the ${}.

edited Jan 7, 2020 at 21:20

answered Jan 7, 2020 at 21:05

Korgrue

3,4781 gold badge15 silver badges21 bronze badges

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

3 Comments

Anis R. Over a year ago

And note the use of backticks (`) instead of normal quotation marks

Vorihs Over a year ago

Thank you, it worked.I didn't knew about that, still learning :)

Korgrue Over a year ago

Thanks David. Updated my comment.

Anis R. · Accepted Answer · 2020-01-07 21:11:59Z

1

Well, if all you want to do at the end of the day is change a span's color, skip directly to method 3.

There are many ways of doing so:

1- Basic string concatenation:

document.getElementById("x").innerHTML = '<span style="color:red;">' + x + '</span>';

2- Template literals (where you need to use backticks (`) instead of quotes):

document.getElementById("x").innerHTML = x + `<span style="color:red;">${x}</span>`;

3- Why not simply use CSS to change the color? Assuming you insert your <span> directly into your HTML, and that this span has an ID of 'mySpan', you can do:

var span = document.getElementById('mySpan');
span.style.color = 'red';

answered Jan 7, 2020 at 21:11

Anis R.

7,0122 gold badges17 silver badges44 bronze badges

Collectives™ on Stack Overflow

JS How to add variable into span

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related