CODEWITHSUNDEEP
javascripthtml
Jesper
Jesper

Reputation: 747

How to get value of HTML element in javascript?

so I'm having trouble with getting the value of a specific field in my code - I made this pretty simple example to show my problem, here is the JSFiddle: https://jsfiddle.net/c3jtg60v/

The HTML:

<p id="theInput">
   desired-value
</p>

The Javascript:

var value = document.getElementById("theInput").value;
console.log(value);

As is, I have assigned a p element with an id of "theInput", and in it I have the desired value, that I want to make use of in my javascript.

At the moment, all I'm trying to do is console.log the value, but when I do this, all i get logged in the console is 'undefined'. What I really want to get logged to the console is "desired value",

Upvotes: 11

Views: 85676

Answers (9)

Tarantino
Tarantino

Reputation: 65

There is also another solution if the HTML Element you are looking for, does not have an "id" tag. Officially if you would like to take the "value" of the element, you would do something like this:

var value = document.getElementById("someId").value

But sometimes ther is no "id" of that element, so you can use something like this:

var element =  document.getElementsByClassName("className") as HTMLCollectionOf<HTMLElement>

This will return a collection of the HTML elements. And then you simply chose the element you want, by it's index and take the value like that:

var value = element[index]['value']

Upvotes: 0

Saskia
Saskia

Reputation: 524

.value refers to a value property, which cannot be set for a P tag. If you want the inner text of a html tag, you could do this:

var value = document.getElementById("theInput").innerHTML;

Upvotes: 19

Tarandeep Singh
Tarandeep Singh

Reputation: 1392

It should be textContent not value.

var value = document.getElementById("theInput").textContent;
console.log(value);

Upvotes: 2

Sandip - Frontend Developer
Sandip - Frontend Developer

Reputation: 14669

Better to use innerText instead innerHTML if you wants to get only text, if you wants to get tag also use innerHTML.

innerText: Give you only text

innerHTML: Give you text and HTML

 var value = document.getElementById("theInput").innerText;
 console.log(value);
 value = document.getElementById("theInput").innerHTML;
 console.log(value);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="theInput">
     desired-value
     <span>test</span>
</p>

Upvotes: 2

Atul Nepal
Atul Nepal

Reputation: 1

.value property in java script is only for returning values of the tag used for "forms" such as input tag. What you wanna do is use innerHTML property which returns the value of content inside the html tag.
So 

var value = document.getElementById("theInput").innerHTML;
console.log(value);

Would be the way to go

Upvotes: 0

Tarek Salah uddin Mahmud
Tarek Salah uddin Mahmud

Reputation: 944

.value does not return the inner text. You should use .textContent or .innerHTML. Use one of the following

var value1 = document.getElementById("theInput").innerHTML;
console.log(value1);

var value2 = document.getElementById("theInput").textContent;
console.log(value2);

Upvotes: 1

Serraniel
Serraniel

Reputation: 296

Use innerHTML:

var value = document.getElementById("theInput").innerHTML;
console.log(value);

JS Fiddle

Upvotes: 1

Kalu Singh Rao
Kalu Singh Rao

Reputation: 1697

var msg = document.getElementById('theInput').innerHTML;
alert(msg);
<p id="theInput">
   desired-value
</p>

Upvotes: 1

Pranjal
Pranjal

Reputation: 1118

var value = document.getElementById("theInput").innerHTML;
console.log(value);

Upvotes: 4

Related Questions