Question

我需要使用颜色名称数组填充下拉列表。下面是我的HTML和js代码，但是当我实际按下下拉菜单时，没有任何颜色显示，当我点击颜色时，画布的颜色不会改变。它还需要一个按钮，在按下时清除画布。的 HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Project 3</title>
<meta charset="utf-8">
<meta name="description" content="Project 3">
<meta name="author" content="Kim Peoples">
<link rel="stylesheet" href="p3.css">
<script src="p3.js"> </script>
</head>
<body>
<canvas width="500" height="500" id="myCanvas"></canvas>
<form id="myForm">
    <select id="colorDropdown">
        <option>Select a Background Color</option>
    </select>
</form>
<button onclick="clearCanvas">Clear Canvas</button>
</body>
</html>

JavaScript：

let selectElement = document.getElementById('#colorDropdown'),
let options = ["BlueViolet", "Crimson", "DarkSalmon", "OliveDrab", "SaddleBrown"];
for (let i < options.length - 1; i = 0; i++) {
    let opt = options[i];
    let optionList = document.createElement("option");
    optionList.textContent = opt;
    optionList.value = opt;
    select.appendChild(optionList)
}
document.getElementById('colorDropdown').onchange = function(){
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(20, 20, 150, 100);
ctx.fillStyle = document.getElementById('colorDropdown').value;

ctx.fill();
};

Answer 1

看起来你只是遇到了一些语法问题。我已将您的代码复制到JSFiddle https://jsfiddle.net/wtvkv2t4/1/，并进行了以下更改：

从let变量名称之前删除了options关键字。您在let selectElement .....行的末尾使用了逗号，因此您不需要将options定义为let，因为它已经是。{/ LI>
更改了for循环条件中参数的顺序
将名为select的变量的名称替换为您实际定义的变量的名称，称为selectElement

以下是新的工作代码：

let selectElement = document.getElementById('colorDropdown'),
options = ["BlueViolet", "Crimson", "DarkSalmon", "OliveDrab", "SaddleBrown"];

for (let i = 0 ; i < options.length - 1; i++) {
  let opt = options[i];
  let optionList = document.createElement("option");
  optionList.textContent = opt;
  optionList.value = opt;
  selectElement.appendChild(optionList)
}

document.getElementById('colorDropdown').onchange = function() {
  let c = document.getElementById("myCanvas");
  let ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.rect(20, 20, 150, 100);
  ctx.fillStyle = document.getElementById('colorDropdown').value;

  ctx.fill();
};

Answer 2

您的元素名称为selectElement，但您将选项填充到select。 let selectElement = document.getElementById('#colorDropdown'),也有错误。另一个错误是for循环中语句的顺序。请查看代码段以获取更正后的代码。

var selectElement = document.getElementById("colorDropdown");
let options = ["BlueViolet", "Crimson", "DarkSalmon", "OliveDrab", "SaddleBrown"];
for (let i = 0; i < options.length - 1; i++) {
    let opt = options[i];
    let optionList = document.createElement("option");
    optionList.textContent = opt;
    optionList.value = opt;
    selectElement.appendChild(optionList)
}
document.getElementById('colorDropdown').onchange = function(){
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(20, 20, 150, 100);
ctx.fillStyle = document.getElementById('colorDropdown').value;

ctx.fill();
};

<!DOCTYPE html>
<html lang="en">
<head>
<title>Project 3</title>
<meta charset="utf-8">
<meta name="description" content="Project 3">
<meta name="author" content="Kim Peoples">
<link rel="stylesheet" href="p3.css">
<script src="p3.js"> </script>
</head>
<body>
<canvas width="500" height="500" id="myCanvas"></canvas>
<form id="myForm">
    <select id="colorDropdown">
        <option>Select a Background Color</option>
    </select>
</form>
<button onclick="clearCanvas">Clear Canvas</button>
</body>
</html>

Answer 3

您的代码中有错误：

for (let i < options.length - 1; i = 0; i++)这不对 - ＆GT; for (let i=0 ; i < options.length; i++)

<button onclick="clearCanvas">

- ＆GT; <button onclick="clearCanvas()">Clear Canvas</button>

我为你写了正确的代码。

<head>
<title>Project 3</title>
<meta charset="utf-8">
<meta name="description" content="Project 3">
<meta name="author" content="Kim Peoples">
<link rel="stylesheet" href="p3.css">
<script src="p3.js"> </script>
</head>
<body>
<canvas width="500" height="500" id="myCanvas"></canvas>
<form id="myForm">
    <select id="colorDropdown">
        <option>Select a Background Color</option>
    </select>
</form>
<button onclick="clearCanvas('#FFFFFF')">Clear Canvas</button>
<script>
    function init(){
        let selectElement = document.getElementById('colorDropdown');
        let options = ["BlueViolet", "Crimson", "DarkSalmon", "OliveDrab", "SaddleBrown"];

        for (let i=0 ; i < options.length; i++) {
            let optionList = document.createElement("option");
            optionList.innerHTML = options[i];
            optionList.value = options[i];
            selectElement.appendChild(optionList);
        }
    }
   init();
    document.getElementById('colorDropdown').onchange = function(){
     clearCanvas( this.value);
    };

   function clearCanvas(e) {
        let c = document.getElementById("myCanvas");
        let ctx = c.getContext("2d");
        ctx.beginPath();
        ctx.rect(20, 20, 150, 100);
        ctx.fillStyle = e;

        ctx.fill();
   }
</script>
</body>
</html>

我允许自己做一些改变：
用于初始化选择的功能，我已经将颜色更改代码与复位功能相结合。

再见

Answer 4

添加了明确的功能：引用该问题。小修正和一些评论

// probably should put this into a function so here....
window.onload = function () {
    let selectElement = document.getElementById('colorDropdown'),
      options = ["BlueViolet", "Crimson", "DarkSalmon", "OliveDrab", "SaddleBrown"];
    for (let i = 0; i < options.length - 1; i++) {
      let opt = options[i];
      let optionList = document.createElement("option");
      optionList.textContent = opt;
      optionList.value = opt;
      selectElement.appendChild(optionList)
    }
}
document.getElementById('colorDropdown').onchange = function() {
  let c = document.getElementById("myCanvas");
  let ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.rect(20, 20, 150, 100);
  ctx.fillStyle = document.getElementById('colorDropdown').value;
  ctx.fill();
};
// Leverage another question: https://stackoverflow.com/q/2142535/125981
document.getElementById('clearCanvas').onclick =
  function clearCanvas() {
    let canvas = document.getElementById("myCanvas");
    var context = canvas.getContext('2d');
    context.save();
    // Use the identity matrix while clearing the canvas
    context.setTransform(1, 0, 0, 1, 0, 0);
    context.clearRect(0, 0, canvas.width, canvas.height);
    // Restore the transform
    context.restore();
  }

<body>
  <canvas width="500" height="500" id="myCanvas"></canvas>
  <form id="myForm">
    <select id="colorDropdown">
        <option>Select a Background Color</option>
    </select>
  </form>
  <button id="clearCanvas">Clear Canvas</button>
</body>

Answer 5

这应该有效：

＆＃13;

function update() {

  var color = ["undefined", "BlueViolet", "Crimson", "DarkSalmon", "OliveDrab", "SaddleBrown"];

  var y = document.getElementById("dropdown");
  var x = y.options[y.selectedIndex].value;

  document.getElementById("myCanvas").style = "background: " + color[x] + ";"

}

＆＃13;

<body>
  <canvas width="500" height="500" id="myCanvas"></canvas>
  <br />
  <form>
    <select id="dropdown" onchange="update()">
			<option value="0">Select a Background Color</option>
			<option value="1">BlueViolet</option>
			<option value="2">Crimson</option>
			<option value="3">DarkSalmon</option>
			<option value="4">OliveDrab</option>
			<option value="5">SaddleBrown</option>
		</select>
    <input type="button" onclick="document.getElementById('dropdown').value = '0'; document.getElementById('myCanvas').style = 'background: undefined;'" value="Clear Canvas">
  </form>
  <br />
  <br />
  <br />
</body>

＆＃13;

要添加额外选项，请在var color数组中输入CSS颜色名称，十六进制代码或rgb代码，并在<option>菜单中输入另一个<select>，并设置所有选项值为连续整数，从0开始，使用＆＃34;选择背景＆＃34;选项。

更清洁的选择：

＆＃13;

function update() {

  var y = document.getElementById("dropdown");
  var x = y.options[y.selectedIndex].innerHTML;

  document.getElementById("myCanvas").style = "background: " + x + ";"

}

＆＃13;

<body>
  <canvas width="500" height="500" id="myCanvas"></canvas>
  <br />
  <form>
    <select id="dropdown" onchange="update()">
			<option value="0">Select a Background Color</option>
			<option>BlueViolet</option>
			<option>Crimson</option>
			<option>DarkSalmon</option>
			<option>OliveDrab</option>
			<option>SaddleBrown</option>
		</select>
    <input type="button" onclick="document.getElementById('dropdown').value = '0'; document.getElementById('myCanvas').style = 'background: undefined;'" value="Clear Canvas">
  </form>
  <br />
  <br />
  <br />
</body>

＆＃13;

要添加额外选项，只需在选项标记之间添加CSS颜色名称即可。

（注意：<br />标记用于在预览底部之间添加空格，因此stackoverflow控制台不会阻止表单。这不应该显示在普通网页上。）

如何使用javascript数组填充颜色下拉列表

5 个答案: