Edit the styling of a button (PHP & MySQL used to populate it) using Javascript

Good day, I am building an e-commerce site. I have used MySQL for the back-end … Read more Edit the styling of a button (PHP & MySQL used to populate it) using Javascript

Good day,

I am building an e-commerce site.

I have used MySQL for the back-end database and PHP to populate the data and tables into my Website.

I have managed a way that when a product is succesfully sold that the innerText of that button (that leads to it’s detailed page) changes from "View" to "SOLD".

I now want to use JavaScript to scan through the table and Find all the button that contain the word "SOLD" and change the styling of them.

*I think my main problem is that the data is puled through from the MySQL database and isn’t ‘fixed’ into the HTML, which is why I think my code is not working.

Here are snippets of my relevant code:
This is the "button" that I want to change, if required condition is met.

<td id="view_button"><?php echo "<a id='isSold' href='/dynamic_page.php?id={$row['id']}'>{$row['View']}</a>"; ?></td>

Here is my attempt at the JavaScript:

const isSold = document.getElementById('isSold');

function ToggleSold(){
  if(isSold.innerHTML === "SOLD"){
    this.style.backgroundColor = "grey";
  } else {
    this.style.backgroundColor = "";
  }
}

Please bare with me, I taught myself how to code over the last 6 months.
All help is appreciated!

Source: JavaSript – Stack Overflow


Categories: NewsTags: , ,

Tags: , ,


Leave a Reply

Your email address will not be published. Required fields are marked *