1
私はピクセルアートアプリを作成しようとしています。 ユーザーの入力に応じてテーブルを動的に作成することができました。 特定のセルをクリックすると、クリックイベントによって割り当てられた色が得られません - event.target.bgcolor = "＃ff0000"; しかし、デバッガを見ると、event.target.bgcolorが色を取得していることがわかります 何を変更する必要がありますか？ テスト目的のために "＃ff0000"を割り当てました。クリックされたセルが背景色を取得しないのはなぜですか？
var rows; //why when define as const --> get error
var columns;
var selectedColor = '#000000';
var colorPicker;
var grid;
colorPicker = document.querySelector('.colorPicker');
/*EventLstener for Color Selection */
colorPicker.addEventListener('change', function(event) {
selectedColor = event.target.value;
console.log(selectedColor);
})
/************************
Create the grid function
************************/
function makeGrid() {
resetGrid()
rows = document.querySelector('.inputRow').value;
console.log(rows);
columns = document.querySelector('.inputCol').value;
console.log(columns);
grid = document.querySelector('.grid');
for (let x = 1; x <= rows; x++) {
let newTR = document.createElement("tr");
newTR.className = "tr"; //assign class
grid.appendChild(newTR);
for (let y = 1; y <= columns; y++) {
let newTD = document.createElement("td");
newTD.className = "td"; //assign class
newTR.appendChild(newTD);
newTD.addEventListener('click', function(event) {
console.log("cell clicked")
// event.target.style.backgroundcolor = "#ff0000";
event.target.bgcolor = "#ff0000";
})
}
}
}
/**************************
Set the color of a grid cell
***************************/
/**********************************
Define a function to reset the grid
***********************************/
function resetGrid() {
//using jQuery to reset the grid
$('tr').remove();
$('td').remove();
document.querySelector('.colorPicker').value = "#000000";
}
makeGrid();
resetGrid()body {
/* margin: 0; */
/* padding: 0; */
text-align: center;
}
h1 {
font-family: "Comic Sans MS";
font-size: 2.8rem;
font-weight: 4rem;
margin-top: 1rem;
margin-bottom: 0.2rem;
color: slateblue;
}
td,
tr {
border: 1px solid black;
}
table {
border-collapse: collapse;
margin: 0 auto;
/* border: 3px solid red; */
}
tr {
height: 20px;
}
td {
width: 20px;
}
.inputRow,
.inputCol {
width: 60px;
margin-right: 15px
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pixel Art Maker</title>
<link rel="stylesheet" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootsrap Latest compiled and minified CSS -->
<!-- To ensure proper rendering and touch zooming-->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Pixel Art Maker</h1>
<h2>Choose Your Grid Size</h2>
<form class=g ridInput>
Set Grid Rows
<input type="number" class="inputRow" name="rows" id="#inputRow" value="0" min="1"> Set Grid Columns
<input type="number" class="inputCol" name="columns" id="#inputCol" value="0" min="1">
<button type="button" class="submitData" onclick="makeGrid()">Click to Generate Grid</button>
<button type="button" class="resetGrid" onclick="resetGrid()">Click to Reset Grid</button>
</form>
<h3>Pick A Color</h3>
<!-- Set the color picker -->
<input type="color" class="colorPicker">
<h2>Design Canvas</h2>
<table class="grid" id="#mytable"></table>
<script src="myscripts.js"></script>
</body>
</html>