当有多个元素时，单击另一个元素时更改元素的属性

Question

I'm trying to disable a textbox when a submit button is clicked - however there are multiple textboxes with submit buttons. The order of the textbox is the same as the order of the button (for example, the 1st button must disable the 1st button).

As such, I've been using the following code:

 window.onload = function() {
    document.querySelectorAll('button')[i].onclick = function fun(i) {
        document.querySelectorAll('input')[i].disabled = true
    }
}

Where i would be the order of the button/textbox.

Thanks in advance for your help.

Answer 1

Try using closest which should work in this case. Also I am not sure about how you iterate through the querySelectAll, but I may just not be aware of the shorthand. Change to:

window.onload = function() {
    const allButtons = document.querySelectorAll('button');
    allButtons.forEach(function(button) {
      button.addEventListener('click', function(e) {
          e.target.closest('input').disabled = true;
      });
});