Question

我正在尝试按下按钮来清除旁边的输入。到目前为止，我的代码就像这样，

<input type="file" name="lay4img1" id="lay4img1">
<a href="javascript:;"
   onclick="
     if(document.getElementById('lay4img1').value != '') {
       document.getElementById('lay4img1').value = '';
       alert('clear success');
     } else { 
       alert('failed'); 
     }">
   <input type="button" value="Clear">
</a>

当我选择文件并使lay4img1具有值，然后按下按钮时，会执行警告clear success，因此document.getElementById也会执行，但该字段仍然不为空？我的代码出了什么问题？

除了<input type="file" name="lay4img1" id="lay4img1">之外，我还有其他字段，所以我不想要，也不能使用<button type="reset">因为它会清除整个表单，我认为这不是用户友好的。

Answer 1

这是绑定处理程序的可怕方式。另外，用锚点包裹一个按钮是完全没有意义的。考虑使用JS添加事件侦听器。此侦听器删除旧输入并将其替换为新输入：

HTML：

<input id="mybutton" type="button" value="Clear">

JS：

function clickhandler(){
     var input = document.getElementById('lay4img1');

     var replacement = document.createElement('input');
     replacement.type = "file";
     replacement.id = 'lay4img1';
     replacement.name = 'lay4img1';

     if(input.value != '') {
       input.parentElement.replaceChild(replacement, input);
       alert('clear success');
     } else { 
       alert('failed'); 
     }
}
var button = document.getElementById('mybutton');
if (!button.addEventListener) {
    button.attachEvent("onclick", clickhandler);
}
else {
    button.addEventListener("click", clickhandler, false);
}

以下是演示：http://jsfiddle.net/LHM9V/1/

Answer 2

如果输入字段是下面的兄弟...你可以尝试使用onClick属性的这个javascript代码......

<form>
     <input type="file" name="lay4img1" id="lay4img1">
     <button type="button" onClick="this.parentNode.getElementsByName('lay4img1')[0].value=new Array();">Clear</button>
</form>

Javascript document.getElementById（）。value =''字段已执行但无效

2 个答案: