Target a button with its content-CodePudding

I've two buttons with same class but different content

<a >Sold Out</a>
<a >Re-Sell</a>

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

CodePudding user response：

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 >Sold Out</a>
      <a >Re-Sell</a>
      <a >Button3</a>
      <a >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 >Sold Out</a>
      <a >Re-Sell</a>
      <a >Sold Out</a>
      <a >Re-Sell</a>
      <a >Sold Out</a>
      <a >Re-Sell</a>
      <a >Sold Out</a>

CodePudding user response：

<a  id="ordrViewBtn">Sold Out</a>

alert($("#ordrViewBtn").text());