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>

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>

• javascript

• Wele. Please make a runnable snippet. See how to create an minimal reproducible example – random_user_name Commented Feb 25, 2019 at 14:52
• 3 h4 tags do not have a value. Only inputs do. They also don't have type or name attributes. – Turnip Commented Feb 25, 2019 at 14:52
• 1 Possible duplicate of How do I change the text of a span element in JavaScript – Heretic Monkey Commented Feb 25, 2019 at 14:56

4 Answers 4

Replace

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

with

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

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>```

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>

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>