Question

我几天来一直试图使此网格出现在我的页面上，最终成为一种素描。我对编码非常陌生，现在已经走到了尽头。我无法从开发工具中看到任何错误，我的console.logs显示在我认为应该的位置和方式。我希望在正确的方向上稍作调整。我还没有学习jQuery，所以这是用香草JS和HTML。我在脚本中附加了html文件，但CSS不在此处。

<head>
 
</head>
 <body>
    <div id="headers">
<h1 id="heading">Etch-A-Sketch</h1>
<h3 id="instructions">Choose a color and set the slider on the size of grid you prefer</h3>
<p id="moreInstructions">Move cursor over the grid to draw your masterpiece. If you make a mistake, just hit "Erase"
then move cursor over unwanted squares. Click "Draw" to continue drawing. Click "Clear Grid" to clear grid
entirely and begin a new drawing.</p>
</div>
<select id="colorOptions">
  <option value"colorChoices" selected>Colors</option>
  <option value"red">Red</option>
  <option value"pink">Pink</option>
  <option value"blue">Blue</option>
  <option value"green">Green</option>
  <option value"purple">Purple</option>
  <option value"black">Black</option>
</select>



<div id="btns">
  <label class="radio">Draw
<input type="radio" id="draw" class="radio" checked>Draw></label>
<label class="radio">Erase
<input type="radio" id="erase" class="radio"></label>
<label class="radio">Clear Grid
<input type="radio" id="erase" class="radio"></label>
</div>

<div class="size">Size = <span class="out"> </span>
<input type="range" class="slider" id="myRange" min="1" max="64" value="16">

<div class="grid">
</div>




<script> let size = 16;
let color = 'black';

var slider = document.getElementById('mySlider');
var output = document.querySelector('.out');
var clearGrid = document.getElementById('clearGrid');
let drawButton = document.getElementById('draw');
let eraseButton = document.getElementById('erase');
let select = document.getElementById('colorOptions');

drawButton.onclick = function() {
  if (this.checked == true && eraseButton.checked == false) color = select.value;
}

eraseButton.onclick = function() {
  if (this.checked == true) color = 'white';
  else if (this.checked == false)
  if (drawButton.checked) color = select.value;
}
  
  
select.onchange = function() {
let color = this.value;
} 
  
  slider.oninput = function() {
  output.innerHTML = this.value;
  clearBoard();
  buildBoard(this.value);
  }
  
  
clearGrid.addEventListener('click', clearBoard);
function clearBoard() {
let cell = document.querySelectorAll('.cell');
cell forEach(x => x.remove());
}

function buildBoard(size) {
let grid = document.querySelector(".grid");
grid.style.gridTemplateRows = `repeat (${size}, 1fr)`;
grid.style.gridTemplateColumns = `repeat (${size}, 1fr)`;
for (let i = 0; i < size; i++) {
   for (let j = 0; j < size; j++) {
     let square = document.createElement('div');
     square.classList.add('cell');
     square.addEventListener('mouseover', hoverFunc);
     grid.appendChild(square);
   }
}
}
buildBoard(size);











function hoverFunc(e) {
  if (eraseButton.checked == true) {
    this.style.backgroundColor = 'white';
  } else if (drawButton.checked == true) {
   this.style.backgroundColor = select.value;
  }
}




drawButton.addEventListener('click', hoverFunc);</script>
</body>

网格将不会显示

0 个答案: