why I get undefined value instead my input value

Question

I'm new in JavaScript and I have a problem, it'll be great if someone could help me. I'm trying to write something from one <p> to h4. my code is:

function ok() {
  document.getElementById("out").innerHTML = document.getElementById("name").value;
}

<label id="label">your text is:</label>
<br>
<input type="text" />
<p id="name" style="font-family: 'Courier New', Courier, monospace;"></p>
<button type="submit" id="click" onclick="ok()">click</button>
<h4 id="out" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;"></h4>

but when I'm doing it I get undefined. If someone could help me understand what I'm doing wrong it'll be great.

`document.getElementById("name")` refers to your `p` element with `id="name"` - can you elaborate as to how you came to the conclusion that it should have a `value` attribute...? Your `input` element seems to be what you're after, but it's unclear how you got to the idea that it has an `id` at all, let along one that matches the string `name`. — esqew, Feb 09 '22 at 20:48
Does this answer your question? [How do I get the value of text input field using JavaScript?](https://stackoverflow.com/questions/11563638/how-do-i-get-the-value-of-text-input-field-using-javascript) — Heretic Monkey, Feb 09 '22 at 21:00

TheHunter Shergill · Answer 1 · 2022-02-09T21:06:11.873

It is giving undefined because <p> element is empty and you are using .value you need to use .innerHTML so that is why it is returning undefined.

I changed your code a little bit you can see I am fetching values from the input tag and displaying them in p tag and h4 tag.

function ok()
{
document.getElementById("out").innerHTML=document.getElementById("name").innerHTML=document.getElementById("inputname").value;
}

<label id="label">your text is:</label>
<br>
<input type="text" id="inputname"/>
<p id="name" style="font-family: 'Courier New', Courier, monospace;"></p>
<button type="submit" id="click" onclick="ok()">click</button>
<h4 id="out" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;"></h4>

score 1 · Answer 2 · answered Feb 09 '22 at 20:55

You are referencing the wrong element. It's trying to get the value of <p>. But <p> has no value.

The id="name" attribute must be in the input element.

In this way:

<input id="name" type="text"/>
<p style="font-family: 'Courier New', Courier, monospace;"></p>

score 0 · Answer 3 · answered Feb 09 '22 at 21:35

You should give a id to input then receive value of that:

function ok() {
  document.getElementById("out").innerHTML = document.getElementById("input").value;
}

<label id="label">your text is:</label>
<br>
<input type="text" id="input"/>
<p id="name" style="font-family: 'Courier New', Courier, monospace;"></p>
<button type="submit" id="click" onclick="ok()">click</button>
<h4 id="out" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;"></h4>

why I get undefined value instead my input value

3 Answers3