document.getElementById in a loop return null

Question

I use Php and Javascript My first page is appel.php

In which, I create a table with php in : constructAppel.inc.php with datas from my database.

foreach ($rows as $row):
  $count = $count +1;
    echo "<tr>";
    echo "<td><button Onclick=ClickPresence('bt".$row['Id']."') id='bt".$row['Id']."' style='background-color:green;'>Oui</button></td>";
    echo "<td>" . $row['Nom'] . "</td>";
    echo "<td>" . $row['Prenom'] . "</td>";
    echo "<td>" . $row['Cat'] . "</td>";
    echo "<td><button onclick=window.location.href='vueparticipant.php?id=".$row['Id']."' id=". $row['Id'] ." class='material-icons'>assignment_ind</button></td>";
    echo "</tr>";
endforeach;
echo "</table>"

I want to change the background-color of my buttons with javascript (or maybe something else)

Php :

 $stmt = $db->prepare("SELECT * FROM dataappel WHERE Acti = '$ActiActu' AND Dat = '$Dat' AND Prof = '$Prof' AND Etab = '$Etab'");
  $stmt->execute();
  $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
  $count = $stmt->rowCount();
  if ($count > 0) {
    $list = '';
    foreach ($rows as $r) {
      $list .= "bt".$r['IdEleve'].",".$r['Appel']."/";
    }

My list is something like : bt55,Yes/bt45,No/bt21,Yes.

I want if value after comma = Yes then background of bt55 is green

Here my Script:

var list = '<?php echo $list; ?>'
    if (list != '') {
      ActuPresence(list);
    }

    function ActuPresence(list){
var list = '<?php echo $list; ?>'
  var a = list.split("/");

  for (var i = 0; i < a.length-1; i++) {
    var b = a[i].split(",");
    var btn = b[0];
    console.log(document.getElementById(btn)) ;  

    if (b[1] = "No"){
      console.log(btn);
      btn.style.backgroundColor = "red";
      console.log("No");
    }
        if (b[1] = "Yes"){
      btn.style.backgroundColor =  "green";
      console.log("Yes");
    }

But document.getElementById(btn) return null.

Var a, var b and var btn return good value. I know that bt55 exist because when i click on it, console.log return good id.

Did you verify the value of btn at that point? Do you actually have an element with an id="..." tag with those contents? — ccKep
<td><button onclick=window.location.href='vueparticipant.php?id=17' id=17 class='material-icons'>assignment_ind</button></td> doesn't look like valid HTML for me - check your concatenations and quotes (and post the resulting HTML in your question aswell). — ccKep
<button onclick=window.location.href='vueparticipant.php?id=17' id=17 class='material-icons'>assignment_ind</button> does what I want, no problem on this button. — Clément Tengip
btn return null at that point. I tried to put it somewhere else but nothing. I'm trying with window.onload — Clément Tengip

Osama Osama · Accepted Answer · 2019-03-04T21:35:08

First remove onClick from the button and add class to it

echo "<td><button id='bt".$row['Id']."' style='background-color:green;' class='classname'>Oui</button></td>";

Then use window.onload

window.onload=function(){
var classname = document.getElementsByClassName("classname");
className[0].addEventListener("click",function(){
    var list = '<?php echo $list; ?>'
    if (list != '') {
      ActuPresence(list);
    }
});
 function ActuPresence(list){
var list = '<?php echo $list; ?>'
var a = list.split("/");
for (var i = 0; i < a.length-1; i++) {
var b = a[i].split(",");
var btn = b[0];
console.log(document.getElementById(btn)) ;  
if (b[1] = "No"){
  console.log(btn);
  btn.style.backgroundColor = "red";
  console.log("No");
 }
    if (b[1] = "Yes"){
  btn.style.backgroundColor =  "green";
  console.log("Yes");
 }

The problem in you code is that you call the ID before the page is ready so at the time of execution it is null

document.getElementById in a loop return null

1 Answers