JavaScript関数を使用して入力値を設定


208

現在、YUIガジェットを使用しています。またdiv、YUIが描画したからの出力を検証するためのJavascript関数もあります。

Event.on("addGadgetUrl", "click", function(){
    var url = Dom.get("gadget_url").value;  /* line x ------>*/
    if (url == "") {
        error.innerHTML = "<p> error" /></p>";
    } else {
        /* line y ---> */ 
        /*  I need to add some code in here to set the value of "gadget_url" by "" */
    }
}, null, true);

これが私のdivです:

<div>
<p>URL</p>
<input type="text" name="gadget_url" id="gadget_url" style="width: 350px;" class="input"/>
<input type="button" id="addGadgetUrl" value="add gadget"/>
<br>
<span id="error"></span>
</div>

私の質問を見るとわかるように、の値をどのように設定できgadget_urlます""か?


1
試してみてください... Dom.get("gadget_url").set("value","");...しかし、よく
わかり

回答:


470

YUIをお試しください...

Dom.get("gadget_url").set("value","");

普通に Javascript

document.getElementById('gadget_url').value = '';

jQuery

$("#gadget_url").val("");

72
document.getElementById('gadget_url').value = '';

@Alastair確認-YUIを使用していません。ただし、タイトルのOPには「JavaScript関数を使用して入力の値を設定」(YUI関数ではなく)と
書かれている


4

ユースケースに応じて、JavaScript(element.value = x)またはjQueryのどちらを使用するかによって違いが生じます$(element).val(x);

場合xundefinedはJavaScript結果に対し、空の文字列でjQueryの結果を"undefined"文字列として。


1

私はYUIを使用していませんが、それが他の誰かを助ける場合に備えて-ページのIDが重複していた(ダイアログ内で作業していて、その下のページを忘れていた)ことが問題でした。

一意になるようにIDを変更すると、Sangeetの回答に記載されている方法を使用できました。


ただ、簡潔さと今後の参考のために、ページ上のすべてのidのは、必要があります常に一意である
Pogrindis

1

document.getElementById( 'gadget_url')。value = 'your value';


0

KamilKiełczewskiが提供するソリューションは、実際には完全に機能します。私見、document.getElementByIdよりもはるかに読みやすい。

function setValue(){
gadget_url.value='value to be set';
}
<input id='gadget_url' type='text'/>
<button onclick='setValue()'>Set value</button>


-3

試す

gadget_url.value=''

addGadgetUrl.addEventListener('click', () => {
   gadget_url.value = '';
});
<div>
  <p>URL</p>
  <input type="text" name="gadget_url" id="gadget_url" style="width: 350px;" class="input" value="some value" />
  <input type="button" id="addGadgetUrl" value="add gadget" />
  <br>
  <span id="error"></span>
</div>

更新

なぜこれほど多くの投票(コメントなし)かわからない-しかし(将来の読者にとって)このソリューションが機能しないとは思わない-OPの質問で提供されたhtmlで機能し、これは最短のソリューションである-試すことができる自分でHERE

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.