Javascript代码

Question

Javascript代码

<script>                  
   function disableBtn() {          
       document.getElementsByTagName("INPUT")[1].removeAttribute("disabled");                       
   }                            
</script>

html代码

<form>

    <p>
        <label for="uname">* User Name :</label>
        <br>
        <input type="text" name="txtuname" id="uname" onclick="disableBtn()" value="">
    </p>
    <div style="text-align:center">
        <p>
            <input name="username" type="submit" id="submit" value="Change Username" disabled="disable">
        </p>
    </div>
    <p>
        <label for="fullname">* Full Name :</label>
        <br>
        <input type="text" name="txtfullname" id="fullname" value="">
    </p>
    <div style="text-align:center">
        <p>
            <input name="fullname" type="submit" id="submit" value="Change Fullname" disabled="disable">
        </p>
    </div>
    <p>
        <label for="address">* Address :</label>
        <br>
        <input type="text" name="txtaddress" id="address" value="">
    </p>
    <div style="text-align:center">
        <p>
            <input name="address" type="submit" id="submit" value="Change Address" disabled="disable">
        </p>
    </div>
</form>

我想在执行函数onclick的每个输入标记中添加disableBtn事件，但我希望此代码能够处理我单击的任何输入。我不想要给出这样的数字：

document.getElementsByTagName("INPUT")[1].removeAttribute("disabled");

表示每个输入元素。

我想我应该使用它，但我不知道该把它放在哪里。

Answer 1

您想循环每个输入元素并添加事件吗？ document.getElementsByTagName("input")返回一个数组，因此您可以使用循环来覆盖它。

JavaScript的：

// This is a function which disables an input element
// Notice I used "this" instead of document.getElementsByTagName("input")[some number]
// "this" refers to the input element that was clicked
function disableBtn() {
  this.parentNode.nextElementSibling.querySelector('input[type="button"]').disabled = false;                       
}
// Get every single input element
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; ++i) {
  // Loop through the input elements, and add a "click" event
  var input = inputs[i];
  input.addEventListener("click", disableBtn, false);
}

Answer 2

<强> 代码：

将您的功能更改为：

function disableBtn(el) {
    el.parentNode.nextElementSibling.querySelector("input").disabled = false;
}

这个处理程序：

onclick="disableBtn(this)"

DEMO： http://jsfiddle.net/dcg8gzqt/

<强> 说明：

现在处理程序将当前单击的元素传递给disableBtn函数。

那个功能呢......

获取单击的元素并遍历其.parentNode
向前移动到.nextElementSibling，这是下一个div，
然后使用div在.querySelector()内搜索它找到的第一个input。
将.disabled的{{1}}属性设置为input

如何在不同的输入标签上执行函数？

Javascript代码

html代码

2 个答案: