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 );は何も出力しません。これまでにインターネットで見つけた解決策は2つだけです。

4

3 に答える 3

4

document.getElementByIdこれは、指定されたIDを持つ要素であるHTMLElementタイプのオブジェクトを返すためです。その値にアクセスするには、代わりにこれを使用してください。

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

HTMLElementとgetElementByIdMDNのドキュメントをご覧になることをお勧めします

この問題は、 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 に答える