How to disable button(s) when another button is pressed?

Question

I have a GUI calcualtor, and I want to disable the digit buttons when the equal button is pressed.

Here is the HTML for the button which contains the digit 1:

<td>
  <button type="button" name="digit" value="1" value2 = "disabled">
    1
  </button>
</td>

This is the HTML for the equals button:

<button type="button" name="equals" value="=">
  =
</button>

Here is my JavaScript code attempting to disable it...

document.getElementsByName("equals")[0].addEventListener("click", function(){
  document.getElementsByName("digit").disabled = true;
});

Why is this not working? The event listener should disable it.

There are different way you can do it. This is one way: `` `` — SeekLoad, Jul 11 '17 at 16:36
Sorry I posted the answer as a comment, but somebody misunderstood your question and marked it as a duplicate, but I see no duplicate in your question. What I understood is that you simply want to disable one button, by the use of another. — SeekLoad, Jul 11 '17 at 16:40
Personally I think this solution is the best since with this one you can add more then one button at the same time to be disabled from just one button click: `` `` — SeekLoad, Jul 11 '17 at 16:53

score 0 · Answer 1 · answered Jul 05 '17 at 00:40

document.getElementsByName() returns a NodeList collection of elements.

Instead of document.getElementsByName("digit"), you're looking for document.getElementsByName("digit")[0] in order to access the first element in that collection.

document.getElementsByName("equals")[0].addEventListener("click", function(){
  document.getElementsByName("digit")[0].disabled = true;
});

<td>
  <button type="button" name="digit" value="1" value2="disabled">
    1
  </button>
</td>

<button type="button" name="equals" value="=">
  =
</button>

Hope this helps! :)

How to disable button(s) when another button is pressed?

1 Answers1