How to fill an html tag with a variable from javascript

Question

So, I am trying to to fill an html tag with a variable from javascript. The code that I am doing seems to be partially working but not fully as it is not showing what I am trying to show

The problem is that when I alert the variable from javascript, the value is displayed in the alert, but when calling it from different parts, nothing happens.

var client_code = "SOMETHING";
client_code = String(client_code);
document.getElementById('titleClientCode').value = client_code;

//javasctipt where it is not showing
document.getElementById("titleClientCode").hidden = false;

<h4 class="modal-title" style="display:inline" type="hidden" id="titleClientCode" name="titleClientCode"></h4>

Welcome. Please make a runnable snippet. See how to create an [mcve] — random_user_name, Feb 25 '19 at 14:52
`h4` tags do not have a `value`. Only inputs do. They also don't have `type` or `name` attributes. — Turnip, Feb 25 '19 at 14:52
Possible duplicate of [How do I change the text of a span element in JavaScript](https://stackoverflow.com/questions/1358810/how-do-i-change-the-text-of-a-span-element-in-javascript) — Heretic Monkey, Feb 25 '19 at 14:56

score 3 · Answer 1 · answered Feb 25 '19 at 14:54

3

Replace

document.getElementById('titleClientCode').value = client_code;

with

document.getElementById('titleClientCode').innerHTML= client_code;

answered Feb 25 '19 at 14:54

Thanks a lot, that totally worked. Much appreciated!! – jurgen.s Feb 25 '19 at 14:58

score 3 · Answer 2 · answered Feb 25 '19 at 14:55

Header tags don't have a value. W3 Schools

What you'll want to use is the textContent W3 Schools

So your finished product would look something like this:

<h4 class="modal-title" style="display:inline" type="hidden"  id="titleClientCode" name="titleClientCode"></h4>

<script>
//Javascript Part - works when alerted
var client_code = "SOMETHING";
client_code = String(client_code);
document.getElementById('titleClientCode').textContent = client_code;

//javasctipt where it is not showing
document.getElementById("titleClientCode").hidden = false;
</script>```

score 2 · Accepted Answer · answered Feb 25 '19 at 14:54

2

You are messing up quit a bit here. You have the headline <h4> element. If you use the value, you will set the value of this line. The value is not equal to the displayed content (which is the innerHTML). I think you want to use the following code

var client_code = "SOMETHING";
document.getElementById("titleClientCode").innerHTML = client_code;

<h4 class="modal-title" style="display:inline" id="titleClientCode" name="titleClientCode"></h4>

answered Feb 25 '19 at 14:54

miile7

2,547
3
23
38

1

Hi, Thanks a lot, that worked....as I was using the value, and I switched with innerHTML – jurgen.s Feb 25 '19 at 14:57

score 2 · Answer 4 · answered Feb 25 '19 at 14:57

Only inputs have a value.

To change / set the content of other elements, use either innerText, innerHTML, or textContent.

I used innerText for this answer:

//Html Part


//Javascript Part - works when alerted
var client_code = "SOMETHING";
client_code = String(client_code);
document.getElementById('titleClientCode').innerText = client_code;

//javasctipt where it is not showing
document.getElementById("titleClientCode").hidden = false;

<h4 class="modal-title" style="display:inline" type="hidden"  id="titleClientCode" name="titleClientCode"></h4>

How to fill an html tag with a variable from javascript

4 Answers4