javascript Javascript读取html输入值

Javascript reading html input values

提问by Piccolo

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.

我正在尝试制作一个 Javascript 脚本，要求用户输入有关一本书的详细信息，然后为其生成一个 MLA 风格的引文。以下是我的 HTML 代码。

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

我的Javascript如下。

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.

所以我从网上尝试了很多方法，试图让它打印出文本框的内容fname。var fname = document.getElementById('fname');打印出的[object HTMLInputElement]不是实际值。在document.getElementById("cite").innerHTML=document.getElementById( fname );当我运行该功能不显示任何信息。到目前为止，这是我在 Internet 上找到的仅有的两种解决方案。

回答by Danilo Valente

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

这是因为document.getElementById返回一个 HTMLElement 类型的对象，它是具有指定 ID 的元素。要访问它的值，请改用它：

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

I suggest you to take a look at HTMLElementand getElementByIdMDN documentations

我建议您查看HTMLElement和getElementByIdMDN 文档

This issue also applies to either getElementsByClassName, getElementsByTagNameand getElementsByNamemethods, although they all return an array with the matching elements.

此问题也适用于getElementsByClassName、getElementsByTagName和getElementsByName方法，尽管它们都返回具有匹配元素的数组。

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; 

};

回答by Andbdrew

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

在您通过 id 选择一个输入元素后，例如：

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

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

您可以通过该value属性查看其当前值。例如：

console.log(fname.value);

回答by mbharanidharan88

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

正确检查您的代码。您已经使用了对象而不是 id。

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

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

Use this instead

改用这个

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