Question

几天来我一直在尝试蚀刻草图。我是一名全新的Web开发学生，因此找不到下一步可以尝试的方法。我已经放入控制台日志，并且在开发工具中没有发现任何错误。

我试图分解其他文件以一次仅运行一个功能，但我的addEventListeners却无法正常运行。朝正确的方向稍加推动会很有帮助。

<!DOCTYPE html>
<html>
<head>
//<link rel="stylesheet" type="text/css" href="etchASketch.css">
 <style>
* {
    background-color: aqua;
    font-size: 16px;
}

#headers {
    height: 25%;
    position:relative;
  
}

h1 {
    font-size: 2em;
    font-family: cursive;
    color: blue;
    text-align: center;
    margin: auto;
    padding-bottom: 10px;
   
}

#instructions {
    text-align: center;
    font-size: 1.5em;
    font-family: cursive;
    margin: auto;
    padding-bottom: 15px;
    
}
#moreInstructions {
    text-align: center;
    font-family: cursive;
    font-size: 1.25em;
    
    width: 60%;
    margin: auto;
    padding-top: 15px;
}

#colorOptions {
    position: absolute;
    height: 45px;
    width: 125px;
    color: blue;
    text-align: center;
    font-family: cursive;
    font-size: 1.25em;
    cursor: pointer;
    border-radius: 20%;
    left: 25px;
    background-color: pink;
}

#btns {
   float: right;
   
    height: 200px;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: 30px;
    
    
}

.radio {
    height: 25px;
    width: 50px;
    border-radius: 15%;
    margin: 15px;
    padding: 10px;
    display: inline-block;
    float: right;
   font-family: cursive;
   font-size:1em;
    
}

#sliderContainer {
    margin: auto;
    
    height: 75px;
    width: 400px;
    font-family: cursive;
    text-align: center;
    color: blue;
    background-color: turquoise;
}

#mySlider {
    margin: auto;
  
}

.grid {
    bottom: 0;
    height: 60%;
    width: 70%;
    margin: auto;
   border: 2px solid black;
    background-color: white;
}

.radio :active {
    background-color: grey;
}
     </style>
</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</label>
<input type="radio" id="draw" class="radio" checked>

<label class="radio">Erase</label>
<input type="radio" id="erase" class="radio">

<label class="radio">Clear Grid</label>
<input type="radio" id="clearGrid" class="radio">
</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('myRange');
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');
let colorChoice = document.getElementById('colorOptions').value;


select.onchange = function() {
let color = this.value;
} 


drawButton.onclick = function() {
  if (this.checked == true && eraseButton.checked == false) color = color;
}

eraseButton.onclick = function() {
  if (this.checked == true) color = 'white';
  else if (this.checked == false)
  color = color;
}
 

function hoverFunc(e) {
  if (eraseButton.checked == true) {
    this.style.backgroundColor = 'white';
  } else if (drawButton.checked == true) {
   this.style.backgroundColor = color;
  }
} 
  

  
  slider.onchange = function() {
  output.innerHTML = this.value;
  size = this.value;
  buildBoard(this.value);
  }
  


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);
   }
}
}



  
clearGrid.addEventListener('click', clearBoard);
function clearBoard() {
let cell = document.querySelectorAll('.cell');
cell.forEach(x => x.remove());
}








function hoverFunc(e) {
  if (eraseButton.checked == true) {
    this.style.backgroundColor = 'white';
  } else if (drawButton.checked == true) {
   this.style.backgroundColor = select.value;
  }
}


buildBoard(size);

    </script>

</body>
</html>

Answer 1

问题1：

<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>

解决方案：

    <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>

问题2：

    <div id="btns">
<label class="radio">Draw</label>
<input type="radio" id="draw" class="radio" checked>

<label class="radio">Erase</label>
<input type="radio" id="erase" class="radio">

<label class="radio">Clear Grid</label>
<input type="radio" id="clearGrid" class="radio">
</div>

解决方案：

    <div id="btns">
<label class="radio">Draw</label>
<input type="radio" name="xyz" id="draw" class="radio" checked>

<label class="radio">Erase</label>
<input type="radio" name="xyz" id="erase" class="radio">

<label class="radio">Clear Grid</label>
<input type="radio" name="xyz" id="clearGrid" class="radio">
</div>

为所有单选按钮提供名称属性，其值应相同

网格没有任何高度。使用内联CSS进行更改。

对于在脚本标记之后的所有变量，将所有let更改为var

javascript不会出现在html上

1 个答案: