How to grab a specific button tag inside of a class

Question

I would like to add a class "hidden" to a 3rd button element inside of 2nd "moves" class. Is there something wrong in my code? Thanks.

document.getElementsByClassName("moves")[1].getElementsByTagName("button")[4].classList.add("hidden");

The html is below; p.s. I just changed the index for this question to simplify my question. So dont mind about the index.

       <div class="moves">
          <button>
            <span class="move">Move Name Here</span> <span class="dp"></span>
            <img src="icons/fighting.jpg" alt="Pokemon move" />
          </button>
          <button>
            <span class="move">Move Name Here</span> <span class="dp"></span>
            <img src="icons/fighting.jpg" alt="Pokemon move" />
          </button>
          <button>
            <span class="move">Move Name Here</span> <span class="dp"></span>
            <img src="icons/fighting.jpg" alt="Pokemon move" />
          </button>
          <button>
            <span class="move">Move Name Here</span> <span class="dp"></span>
            <img src="icons/fighting.jpg" alt="Pokemon move" />
          </button>
        </div>

Answer 1

Update See according to your UI provided, there is only on 'move' class and only four button. so index position will get updated in your javascript code. like in getElementsByClassName, index position will start from 0 i.e getElementsByClassName[0]. Similarly at getElementByTagName index position will start from 0 . so you will have to update index at '3', '3' is refering to your last button.

According to my previous answer, there were 5 buttons so i've used index position 4.

document.getElementsByClassName("moves")[0].getElementsByTagName("button")[3].classList.add("hidden");

<div class="moves">
          <button>
            <span class="move">Move Name Here</span> <span class="dp"></span>
            <img src="icons/fighting.jpg" alt="Pokemon move" />
          </button>
          <button>
            <span class="move">Move Name Here</span> <span class="dp"></span>
            <img src="icons/fighting.jpg" alt="Pokemon move" />
          </button>
          <button>
            <span class="move">Move Name Here</span> <span class="dp"></span>
            <img src="icons/fighting.jpg" alt="Pokemon move" />
          </button>
          <button>
            <span class="move">Move Name Here</span> <span class="dp"></span>
            <img src="icons/fighting.jpg" alt="Pokemon move" />
          </button>
        </div>

see the below code snippe, i think that the scenario. You code us working fine, class is getting added to element. Inspect that element, you'll see it

document.getElementsByClassName("moves")[1].getElementsByTagName("button")[3].classList.add("hidden");

<div class="moves">
first
</div>
<div class="moves">
second
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
</div>