I have a Javascript Calendar in an <table id="calendario">, which allows me to manipulate the table through calendario.rows[i].cells[i].
This Calendar allows the user to make a Reservation and gives the option of closing the day when the user feels it has already too many reservations.
I save his option in a boolean variable and the correspondent position, calendario.rows[i].cells[i], in a string to a SQL DB.
When I save a single result from the query in a javascript variable I can successfully change the style property color, but when I loop through a resulting array nothing changes in my page.
I have 2 columns in the "reservation" table called "Closed" (which holds the boolean 0 or 1) and "Position" (which holds the string calendario.rows[i].cells[i])
when I fetch one result of the array:
while($row = $result->fetch_assoc()) {
$position = $row["Position"];
}
then I save it in a Javascript variable:
<script>
var red_day = <?php echo $position; ?>;
</script>
Then I use a function to change the style and print my result for testing purposes:
<script>
color_red(red_day);
function color_red(position){
position.style.color = "red";
document.getElementById("result").innerHTML = position;
}
</script>
I get the last day painted in red and in the "result" <div> I get [object HTMLTableCellElement].
When I try:
$phparray = array();
while($row = $result->fetch_assoc()) {
$phparray[] = $row["Position"];
}
Then save it in Javascript and call a function:
<script>
var jsarray = <?php echo json_encode($phparray); ?>;
result(jsarray){
var text, pLen, i;
pLen = jsarray.length;
text = "<ul>";
for (i = 0; i < pLen; i++) {
jsarray[i].style.color = "red";
text += "<li>" + jsarray[i] + "</li>";
}
text += "</ul>";
document.getElementById("result").innerHTML = text;
}
Now I don't have any cell painted in red but I get the following result in var text:
calendario.rows[4].cells[1]
calendario.rows[5].cells[5]
What am I doing wrong?
It seems you are calling color_red() before its definition