javascript不会出现在html上
[英]javascript won't appear on html
问题描述
几天来我一直在尝试蚀刻草图。 我是一名全新的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>
1 个解决方案
解决方案1
0 2018-12-23 04:41:09
问题一：
<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嵌入时，Tableau Workbook不会出现在网站中
[英]Tableau Workbook won't appear in website when trying to embed with Javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.