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

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>