I'm writing a simple chess board in HTML, CSS, JS and PHP. I want to add custom color to even and odd squares and a custom dimensions(height and width). I wanted to do it this way, but it doesn't work. It's my assignment for an upcoming exam, so any help would be appreciated. Thank you in advance.
<html>
<body>
Select first color:
<select id="mySelect" onChange="changeColor(value);">
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
</select>
<br><br>
Select second color:
<select id="mySelect2" onChange="changeColor2(value);">
<option value="white">White</option>
<option value="brown">Brown</option>
<option value="red">Red</option>
<option value="purple">Purple</option>
</select>
<br><br>
Dimensions value:
<input type="number" id="dimensions">
<button type="button" onClick="changeDim">Hajde</button>
<table width="270px" cellspacing="0px" cellpadding="0px" border="1px">
<?php
for($row=1;$row<=8;$row++)
{
echo "<tr>";
for($col=1;$col<=8;$col++)
{
$total=$row+$col;
if($total%2==0)
{
echo "<td id='even'></td>";
}
else
{
echo "<td id='odd'></td>";
}
}
echo "</tr>";
}
?>
</table>
<script>
function changeColor(color) {
var x = document.getElementById("mySelect").selectedIndex;
document.getElementById("par").style.background = color;
}
function changeColor2(color) {
var x = document.getElementById("mySelect2").selectedIndex;
document.getElementById("par").style.background = color;
}
function changeDim() {
var px = "px";
var dimension = document.getElementById("dimensions").value + px;
document.getElementById("even").style.height = dimension;
document.getElementById("even").style.width = dimension;
document.getElementById("odd").style.height = dimension;
document.getElementById("odd").style.width = dimension;
}
</script>
</body>
</html>