How to display the value of a javascript variable in html?

Question

I want to display the input value entered on click of button "Go". The input value is stored in the variable named "value" and made visible in id="show".

<html>
<head>
</head>

<body>

<div>
<input type="text" id="input" />
<button onclick="go()">Click</button>
</div>

<div id="show" style="display: none;">
<p>${value}</p>
</div>

<script>


function go() {
    document.getElementById('show').style.display = "block";
   let value = document.getElementById('input').value;
}
</script>
</body>

</html>

Possible duplicate https://stackoverflow.com/questions/40858456/how-to-display-a-javascript-var-in-html-body — Asons, Jun 14 '18 at 15:56

score 1 · Accepted Answer · answered Jun 14 '18 at 13:37

1

You would just set the .textContent of the element that it will be shown in to the variable. No hiding/showing of the element is needed because the element's .textContent will be empty at first (so it will initially not show anything anyway).

<html>
<head>
  <title>Using form data in the page</title>
</head>
<body>
  <div>
    <input type="text" id="input">
    <button onclick="go()">Click</button>
  </div>

  <div id="show"></div>

  <script>
    function go() {
      let value = document.getElementById('input').value;
      document.getElementById('show').textContent = value;
    }
  </script>
</body>
</html>

answered Jun 14 '18 at 13:37

Scott Marcus

64,069
6
49
71

You changed the HTML - I did not vote down though – mplungjan Jun 14 '18 at 13:44
@mplungjan I took out a redundant element. It doesn't change the answer. – Scott Marcus Jun 14 '18 at 13:46
1

It does. You no longer update the P – mplungjan Jun 14 '18 at 13:48
@mplungjan That's right, the `p` was redundant. But, as I said, even with the `p` in there, the answer stays the same *You would just set the .textContent of the element that it will be shown in to the variable.* – Scott Marcus Jun 14 '18 at 13:49
No one but the OP can say whether the `
` is needed or not, as no CSS is available to show the intended layout
– Asons Jun 14 '18 at 13:52
Why people has downvoted the question, if they dont like it or anything they can also tell right? – Aditya Jun 14 '18 at 14:51
@Aditya One person down voted the answer because he didn't approve of me removing your `p` element inside of your `div` element. I did that because, the extra `p` element appears to be redundant. But, the answer is correct and can be used to update the `p` element the same way if you do indeed need it. – Scott Marcus Jun 14 '18 at 15:03
I was talking about the question...3 answers then too the question was downvoted. – Aditya Jun 14 '18 at 15:40
@Aditya I can't say. I didn't down vote it. But, it has been put on hold as "too broad" by several others, so it would seem that some people found your question not specific enough for them. – Scott Marcus Jun 14 '18 at 15:48
@Aditya The most likely main reason they downvote your question (and I didn't, I answered), is that with a simple net search using your own title you would found the answer here: https://stackoverflow.com/questions/40858456/how-to-display-a-javascript-var-in-html-body ... and you are suppose to do a proper research before posting a question here at SO, which one then could say you didn't as it was that easy to find an answer. – Asons Jun 14 '18 at 15:48
May be sometimes the bad day dont give the answer to the right click - i mean I have search things and due to i am new to JS and HMTL and due to lack of time, in which I cannot study first the whole concept, I wrote question.I mean I dont know this community is meant for only experienced one's I thought, I know I am not.my badluck! – Aditya Jun 14 '18 at 15:51
1

@Aditya That is true, still, no one knows that and the SO rules/policies kicks in. Still, you got answers, which is more important for you than the downvotes. – Asons Jun 14 '18 at 15:53
1

@Aditya Don't let it get you down. As you gain experience with Stack Overflow, you'll get to know how to write better questions. But, for now, **[read this](https://stackoverflow.com/help/how-to-ask)**. – Scott Marcus Jun 14 '18 at 15:54
Happy :) thanks people Scott & LGSon :) – Aditya Jun 14 '18 at 15:55

mplungjan · Answer 2 · 2018-06-14T13:48:00.087

1

Use type="button"
Update the P with the value and no hiding and unobtrusive event handling:

document.querySelector("#go").onclick=function() {
  document.querySelector('#show>p').textContent = document.getElementById('input').value;
}

<div>
  <input type="text" id="input" />
  <button type="button" id="go">Click</button>
</div>

<div id="show">
  <p></p>
</div>

edited Jun 14 '18 at 13:48

answered Jun 14 '18 at 13:40

mplungjan

169,008
28
173
236

How to display the value of a javascript variable in html?

2 Answers2