Javascript reading html input values

Question

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.

Answer 1

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; 

};