В настоящий момент у меня есть небольшая проблема с моей функцией JS.
По сути, цель игры здесь состоит в том, чтобы настроить код таким образом, чтобы только на четных строках и четных ячейках , будут ли круги из таблицы окрашены в желтый цвет, а остальные останутся зелеными.
В данный момент у меня это выглядит так:
Как это отображается при предварительном просмотре HTML file
Красные квадраты вокруг кружков указывают четные строки / четные ячейки, которые должны быть окрашены в желтый цвет вместо зеленого.
Вот мой код:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<style>
body {
background-color: linen;
}
td {
height: 75px;
width: 75px;
background-color: green;
border-radius: 50%;
display: inline-block;
}
</style>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function validation() {
var userSubmit = document.getElementById('size').value; //takes the users input and stores it within the variable userSubmit.
var num_rows = userSubmit; //assigning the users input to the number of rows.
var num_cols = userSubmit; //assigning the users input to the number of colums.
var tableBody = ""; //empty string setup for the table.
for (var r = 0; r < num_rows; r++) {
tableBody += "<tr>"; //for loop going through the number of rows required to complete the table.
for (var c = 0; c < num_cols; c++) {
tableBody += "<td>" + c + "</td>"; //for loop, within the rows for loop, this is to determine the number of columns required in the table
}
tableBody += "</tr>";
}
document.getElementById('wrapper').innerHTML = ("<table>" + tableBody + "</table>");
}
</script>
</head>
<body>
<form name="form1">
<select id="size">
<option value="3">3x3</option>
<option value="5">5x5</option>
<option value="7">7x7</option>
</select>
</form>
<button type="submit" onclick="validation()">Generate Graph</button>
<div id="wrapper"></div>
</body>
</html>
Моя функция - создание таблицы из сетки, которую выбирает пользователь, но я не уверен, как приблизиться к JS, необходимому для окраски ячеек, как указано выше.
Любой совет будет признателен, или, пожалуйста, дайте мне знать, если я не был достаточно ясен!