How to concatenate JavaScript variable in HTML tag

Question

I am trying to concatenate a javascript variable into a paragraph tag in html. Don't know how or if this is possible. please help, thanks.

I've tried ${timePassed} and +'timePassed'

<body><p>Congratulations! You won! Would you like to restart?<div class="restart">
    <i class="fa fa-repeat"></i>
</div>Your time was + 'timePassed'</p></body>

It's not implying the variable timePassed into the paragraph tag.

Why are you putting `div` inside a `p` element? This is an invalid HTML — Alon Eitan, Jun 03 '19 at 17:20
Yes, I know that. I am doing it since the div has a class that invokes a restart function — CodingChap, Jun 03 '19 at 17:23
Possible duplicate of [how to display a javascript var in html body](https://stackoverflow.com/questions/40858456/how-to-display-a-javascript-var-in-html-body) — Heretic Monkey, Jun 03 '19 at 17:24
The full code is about 800+ lines of code. Didn't want to put all of it here — CodingChap, Jun 03 '19 at 17:25
Your HTML is invalid. You cannot have a `
` element within a `
`. — Rob, Jun 03 '19 at 17:26
This looks like raw HTML. Where is the JavaScript which wraps around it? — ADyson, Jun 03 '19 at 17:58

score 0 · Answer 1 · answered Jun 03 '19 at 17:24

You will need the tag to use javascript:

<p id="time">Your time was: </p>
<script>
    document.getElementById("time").innerHTML += timePassed;
</script>

I give the <p> an id so I can easily access it in JavaScript.

The document.getElementById function gets an element (an HTML tag) given its ID. So I tell it to get the element with the id "time", which is the <p> element.

Then I append onto the innerHTML (the text inside the <p> element) the JavaScript variable timePassed - that's the += operator.

Ok Thank You! Let me try it out – CodingChap Jun 03 '19 at 17:26 — CodingChap, Jun 03 '19 at 17:26

score 0 · Answer 2 · answered Jun 03 '19 at 17:28

<body>
  <p>
    Congratulations! You won! Would you like to restart?
    <span class="restart"><i class="fa fa-repeat"></i></span>
    Your time was <span id="time_passed_container"></span>
  </p>
</body>

And in your script

<script>
  var timePassed = 11;
  document.getElementById("time_passed_container").innerText = timePassed;
</script>

score 0 · Accepted Answer · answered Jun 03 '19 at 17:29

0

Create a <span id="timeDisplay"> at the position where you want to display the time. Then, use document.getElementById("timeDisplay").innerHTML = timePassed; to display the value of variable timePassed.

See this jsFiddle

answered Jun 03 '19 at 17:29

www.admiraalit.nl

5,768
1
17
32

How to concatenate JavaScript variable in HTML tag

3 Answers3