5

サーバーから返された検索結果でページ上の div を埋める ajax スクリプトが動作しています。各検索結果には、ユーザーがクリックした結果に応じて、ページに非表示の入力値を設定してサーバーに戻すための 2 番目の JavaScript 関数を含むハイパー リンクがあります。そのすべてがうまく機能しています。

ただし、2番目のjavascript関数では、元のdivの内容を選択した値に設定したいので、これを機能させることができません。

開始ページの html

<input type="text" onkeyup="getResults(this.value)"><div id="results"></div>
<input type="hidden" name="result" value="<div id='chosenresult'></div>">

ajax によって返されるマークアップ:

<a href="javascript:void(0);" onclick ="setResult(1)">Result1</a><br>
<a href="javascript:void(0);" onclick ="setResult(2)">Result2</a><br>

setResult の Javascript

function setResult(varname) {
document.getElementById('chosenresult').value = varname; //WORKS FINE
document.getElementById('results').value = varname; //DOES NOT WORK
document.getElementById('results').innerHTML = varname; //ALTERNATIVE ALSO DOES NOT WORK
return false;
}

つまり、非表示の入力フィールドに値を設定することはできますが、「結果」div の内容を置き換えることはできません。

ご提案ありがとうございます。

編集：

私は間違いを見つけました。非表示の入力タブの値に div を配置すると、値を設定するためのハックとして機能しましたが、不要であり、コードが壊れているように見えるため、結果の div は設定されませんでした。div の代わりに、非表示の入力タブに ID を指定し、その値を JavaScript で設定すると、次のように機能します。

html

<div id="results"></div>
<input type="hidden" name = "result" id="chosenresult">

JavaScript

document.getElementById('chosenresult').value = varname; //WORKS FINE
document.getElementById('results').innerHTML = varname; //NOW WORKS
4

1 に答える 1

4

まず、@Muthu Kumaran が言ったように、「var」を識別子として使用しないでください。

2 番目 - 入力値の中に div があるのはなぜですか?

<input type="hidden" name="result" value="<div id='chosenresult'></div>"

このマークアップがある場合:

<input type="text" onkeyup="getResults(this.value)">
<div id="results"></div>
<input type="hidden" name="result" value="<div id='chosenresult'></div>">

IDなしで1つの入力を作成しています。次に、同じレベルで「結果」と呼ばれる div を作成し、HTML マークアップのように見える値を持つ別の名前のない入力を作成します。

だからあなたがするとき

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

ID「chosenresult」の要素がないため、クラッシュする必要があるため、この関数の他の行は実行されません。とにかくそれらを読んでみましょう：

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

div には「値」と呼ばれるプロパティがありません。代わりに innerHTML を使用してください

document.getElementById('results').innerHTML = var;

これは機能する必要がありますが、両方の入力間の div の innerHTML を変更し、入力の値は変更しません

したがって、入力値を変更しようとしている場合は、入力自体に名前を付ける必要があります。

<input id="results" type="text" onkeyup="getResults(this.value)">
<input id="chosenresult" type="hidden" name="result" value="">

そして、その「値」プロパティを変更します。

document.getElementById('chosenresult').value = var;
document.getElementById('results').value = var;
于 2012-10-14T14:05:44.620 に答える