Target a button with its content

Issue

I've two buttons with same class but different content

<a class="button ordrViewBtn">Sold Out</a>
<a class="button ordrViewBtn">Re-Sell</a>

I would like to change color of Sold Out button. is it possible to target a button with its content?

Solution

You can do like this

Updated Code;

CASE-1 :If you want only all button to be colored

const buttons = document.querySelectorAll("a.ordrViewBtn");

for (let i = 0; i < buttons.length; i++) {
  buttons[i].style.color = "green";
}

      <a class="button ordrViewBtn">Sold Out</a>
      <a class="button ordrViewBtn">Re-Sell</a>
      <a class="button ordrViewBtn">Button3</a>
      <a class="button ordrViewBtn">Button4</a>

CASE-2 :If you want only Sold Out buttons to be colored

const buttons = document.querySelectorAll("a.ordrViewBtn");


for (let i = 0; i < buttons.length; i++) {

  if (buttons[i].innerHTML === "Sold Out") 
{
  buttons[i].style.color = "green";
  buttons[i].style.backgroundColor = "yellow";
}
}

<a class="button ordrViewBtn">Sold Out</a>
      <a class="button ordrViewBtn">Re-Sell</a>
      <a class="button ordrViewBtn">Sold Out</a>
      <a class="button ordrViewBtn">Re-Sell</a>
      <a class="button ordrViewBtn">Sold Out</a>
      <a class="button ordrViewBtn">Re-Sell</a>
      <a class="button ordrViewBtn">Sold Out</a>

Answered By - mohit maroliya