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!
I took the advice of the above comment to use PHP instead of JavaScript. It has done the trick.
I'll post the code here, in case someone has the same issue:
<td id="view_button">
<a style="<?php if ($row['View'] == 'SOLD') {
echo 'color:rgb(128, 128, 128);
background: rgb(217, 217, 217);
border: 2px solid rgb(128, 128, 128);
font-size: 10px';
} else if($row['View'] == 'View') {
;
} ?>" href="<?php if($row['View'] == 'SOLD') {
echo '';
} else if($row['View'] == 'View') {
echo "/dynamic_page.php?id={$row['id']}";
} ?>">
<?php echo $row['View'] ?>
</a>
</td>