使用 Javascript 函数设置输入值答案

【问题标题】：Set Value of Input Using Javascript Function使用 Javascript 函数设置输入值
【发布时间】：2011-08-07 17:06:50
【问题描述】：

我目前正在使用 YUI 小工具。我也有一个 Javascript 函数来验证来自 YUI 为我绘制的 div 的输出：

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 的值设置为""？

【问题讨论】：

试试...Dom.get("gadget_url").set("value","");...不过我不太确定

标签： javascript input yui validation

【解决方案1】：

试试... 对于 YUI

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

普通Javascript

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

使用 JQuery

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

【讨论】：

goodForm.coolinput.value='foo'，不可能，为什么可以t I use it instead of addressing the input directly by id`？等等，here..

【解决方案2】：

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

【讨论】：

@Alastair 我确认 - 那不是使用 YUI。但是标题中的OP写“使用Javascript函数设置输入值”（不是YUI函数）所以回答符合问题要求

【解决方案3】：

MVC5 中的以下工作：

document.getElementById('theID').value = 'new value';

【讨论】：

javascript != MVC5
然而他给出了正确的答案。有新手会根据这个答案找到这个问题。

【解决方案4】：

根据用例，使用 javascript (element.value = x) 或 jQuery $(element).val(x); 会有所不同

当x 为undefined 时，jQuery 生成一个空字符串，而 javascript 生成一个字符串"undefined"。

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

我没有使用 YUI，但我的问题是我在页面上有重复的 ID（在对话框中工作而忘记了下面的页面）。

更改 ID 使其唯一允许我使用Sangeet's answer 中列出的方法。

【讨论】：

为简洁起见和将来参考，页面上的所有 id 都应该始终是唯一的

【解决方案7】：

试试

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>

这是最短的工作解决方案 (JSFiddle)。

【讨论】：