我使用Php和Javascript我的第一页是appel.php
其中,我使用php创建了一个表:constructAppel.inc.php,其中包含数据库中的数据。
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>"
我想用javascript改变我的按钮的背景颜色(或者其他东西)
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']."/";
}
我的列表是这样的:bt55,是/ bt45,否/ bt21,是的。
我想如果逗号后的值=是,则bt55的背景为绿色
在这里我的脚本:
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");
}
但是document.getElementById(btn)返回null。
Var a,var b和var btn返回良好的值。我知道bt55存在,因为当我点击它时,console.log返回良好的id。
首先从按钮中删除onClick并向其添加类
echo "<td><button id='bt".$row['Id']."' style='background-color:green;' class='classname'>Oui</button></td>";
然后使用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");
}
您的代码中的问题是您在页面准备好之前调用ID,因此在执行时它是null