0

我正在尝试制作一个 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>

我的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 ); 

};

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

4

3 回答 3

4

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

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

我建议你看看HTMLElement和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; 

};
于 2013-01-09T04:53:15.680 回答
1

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

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

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

console.log(fname.value);
于 2013-01-09T04:54:12.790 回答
1

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

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

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

改用这个

document.getElementById("cite").innerHTML=document.getElementById('fname');
于 2013-01-09T04:54:58.123 回答