Javascript读取html输入值 [英] Javascript reading html input values

问题描述

我试图制作一个Javascript脚本，要求用户输入关于一本书的详细信息，然后为其生成一个MLA样式引用。以下是我的HTML代码。

 < input type =textvalue =作者姓氏id =lname/>< br /> 
 
< input type =textvalue =书名id =booktitle/>< br /> 
 
 
< input type =textvalue =出版城市id =pubcity/>< br /> 
 
< input type =textvalue =Publisherid =pub/>< br /> 
 
< input type =textvalue =出版年份id =pubyear/>< br /> 
< input type =textvalue =脚注数量id =footnote/> 
< br />（'脚注数量'仅适用于计划生成脚注引用的情况。）< br /> 
 
< button type =buttononclick =generateBookFootnote（）>生成脚注< / button> 
< button type =buttononclick =generateBookEndnote（）>生成尾注< / button> 
< / form> 
< p id =cite>< / p> 
  

以及我的Javascript如下。

  function generateBookFootnote（）
 {
 //我只是试图做到这一点，我从另一个StackOverflow问题中获得。以下结果。 
 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）; 
 
}; 
  

所以我尝试了很多来自互联网的方法，试图让它打印出内容文本框 fname 。 var fname = document.getElementById（'fname'）; 打印出 [object HTMLInputElement] 不是实际值。在我运行该函数时， document.getElementById（cite）。innerHTML = document.getElementById（fname）; 不会打印任何内容。这是目前互联网上唯一的两种解决方案。 那是因为文件。 getElementById 返回一个HTMLElement类型的对象，它是具有指定ID的元素。要访问它的值，可以使用它：

  var fname = document.getElementById（'fname'）.value; 
  

我建议你看看 HTMLElement and getElementById MDN文件

这个问题也适用于 getElementsByClassName ， getElementsByTagName 和 getElementsByName 方法，尽管它们都返回一个包含匹配元素的数组。

因此，您的函数应该是：

  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; 
 
}; 
  

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.

解决方案

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; 

};

这篇关于Javascript读取html输入值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！