CODEWITHSUNDEEP
javascripthtml
Piccolo
Piccolo

Reputation: 1666

Javascript reading html input values

I am trying to make a Javascript script that asks the user to enter details about a book, and then it generates an MLA style citation for it. The following is my HTML code. 

<input type="text" value="Author last name" id="lname"/><br />

<input type="text" value="Title of book" id="booktitle"/><br />


<input type="text" value="City of Publication" id="pubcity"/><br />

<input type="text" value="Publisher" id="pub"/><br />

<input type="text" value="Year of Publication" id="pubyear"/><br />
<input type="text" value="Number of footnote" id="footnote"/>
<br />('Number of footnote' only applicable if you plan to generate a footnote citation.)<br />

<button type="button" onclick="generateBookFootnote()">Generate Footnote</button>
<button type="button" onclick="generateBookEndnote()">Generate Endnote</button> 
</form>
<p id="cite"></p>

And my Javascript is as follows.

function generateBookFootnote()
{
    //I was just trying to do this, which I got from another StackOverflow question. Result below.
    var fname = document.getElementById('fname');
    var lname = document.getElementById('lname');
    var booktitle = document.getElementById('bookititle');
    var pubcity = document.getElementById('pubcity');
    var pubyear = document.getElementById('pubyear');
    var pub = document.getElementById('pub');
    var footnote = document.getElementById('footnote');

    document.getElementById("cite").innerHTML=document.getElementById( fname ); 

};

So I've tried many approaches from the Internet, trying to just get it to print out the contents of the text box fname. var fname = document.getElementById('fname'); prints out [object HTMLInputElement] not the actual value. The document.getElementById("cite").innerHTML=document.getElementById( fname ); doesn't print anything when I run the function. Those are the only two solutions I have found on the Internet so far.

Upvotes: 0

Views: 10764

Answers (3)

Danilo Valente
Danilo Valente

Reputation: 11342

That's because document.getElementById returns an object of type HTMLElement, which is the element that has the specified ID. To access its value, use this instead:

var fname = document.getElementById('fname').value;

I suggest you to take a look at HTMLElement and getElementById MDN documentations

This issue also applies to either getElementsByClassName, getElementsByTagName and getElementsByName methods, although they all return an array with the matching elements.

Thus, your function should be:

function generateBookFootnote()
{
    var fname = document.getElementById('fname').value;
    var lname = document.getElementById('lname').value;
    var booktitle = document.getElementById('bookititle').value;
    var pubcity = document.getElementById('pubcity').value;
    var pubyear = document.getElementById('pubyear').value;
    var pub = document.getElementById('pub').value;
    var footnote = document.getElementById('footnote').value;

    document.getElementById("cite").innerHTML = document.getElementById( fname ).value; 

};

Upvotes: 4

Hary
Hary

Reputation: 5818

Check your code properly. You've used the object instead of id.

var fname = document.getElementById('fname');

document.getElementById("cite").innerHTML=document.getElementById( fname );

Use this instead

document.getElementById("cite").innerHTML=document.getElementById('fname');

Upvotes: 1

Andbdrew
Andbdrew

Reputation: 11895

after you select an input element by id with something like:

var fname = document.getElementById('fname');

you can see its current value through the value property. for example:

console.log(fname.value);

Upvotes: 1

Related Questions