I have an HTML file which generates a list of DB-entries in a table by using PHP. That list is row-identifyed by using JS-DOM and making a XMLHttpRequest to my PHP backend. There I decide which color would be as response. When it was responded the color is set by
if (this.readyState === 4 && this.status === 200) {
document.getElementById("artikel' . $row['id'] . '").style.color = this.responseText;
}
The color is only set/changed correctly when
1) I am refreshing the page -> cause of a new DB entry in the PHP-Backend at AJAX
2) I make at least 2 klicks on it
What's the problem?
<?php
foreach ($dataOfDBselect as $row) {
$color = "";
if ($row['status'] == "false") {
$color = "#130f40";
} else {
$color = "#badc58";
}
echo '<tbody class="table-text-small" id="artikel' . $row['id'] . '" style="color: ' . $color . ';">
<th class="text-table table-inner-big">' . $row['name'] . '</th>
<th class="table-inner-big text-table">' . $row['amount'] . '</th>
<th class="table-inner-big text-table"><i class="far fa-check-square" id="checkArtikel_' . $row['id'] . '"></i></th>
</tbody>
<script>
document.getElementById("artikel' . $row['id'] . '").addEventListener("click", function () {
let request = new XMLHttpRequest();
request.open("GET", "./core/handler_ArtikelChecked.php?f_identify=' . $row['id'] . '");
request.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
document.getElementById("artikel' . $row['id'] . '").style.color = this.responseText;
}
};
request.send();
});
</script>';
}
?>
and this is what my PHP-Backend returns correctly to my site
echo $toColor;
which is somethin like $toColor = "#badc58";
</div>
It looks like you are mixing Javascript and PHP together. Your if statement is Javascript, but in document.getElementById("artikel' . $row['id'] . '").style.color = this.responseText;
you are trying to concatenate the id with value $row['id']
that is defined some where in your php script?