CODEWITHSUNDEEP
htmlcssbutton
Vivek Nath R
Vivek Nath R

Reputation: 171

Target a button with its content

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?

Upvotes: 0

Views: 339

Answers (2)

user12417761
user12417761

Reputation:

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>

Upvotes: 1

pk_
pk_

Reputation: 129

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

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

Upvotes: 1

Related Questions