javascript不会出现在html上

Question

I have been trying to make an etch a sketch for days now. 几天来我一直在尝试蚀刻草图。 I cannot find what to try next as I am a brand new web development student. 我是一名全新的Web开发学生，因此找不到下一步可以尝试的方法。 I have put console logs in and haven't found any errors in the dev tools. 我已经放入控制台日志，并且在开发工具中未发现任何错误。

I have tried breaking down other files to run only one function at a time and somehow my addEventListeners aren't working as they should be. 我试图分解其他文件，一次只运行一个功能，但我的addEventListeners却无法正常运行。 A little nudge in the right direction would help alot. 朝正确的方向稍加推动会很有帮助。

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

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

Solution: 解：

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

Problem 2: 问题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>

Solution: 解：

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

Give name attributes to all the radio buttons and their values should be same 将名称属性赋予所有单选按钮，并且它们的值应该相同

The grid is not having any height. 网格没有任何高度。 Change it using inline css. 使用内联CSS更改它。

For all the variables just after the script tag change all the let to var 对于脚本标记之后的所有变量，将所有let更改为var

javascript不会出现在html上

问题描述

1 个解决方案

解决方案1
0 2018-12-23 04:41:09

javascript不会出现在html上

问题描述

1 个解决方案

解决方案1 0 2018-12-23 04:41:09

解决方案1
0 2018-12-23 04:41:09