我如何在 javascript 中正确使用价值答案

【问题标题】：how can i use value right way in javascript我如何在 javascript 中正确使用价值
【发布时间】：2020-07-05 13:44:15
【问题描述】：

你好，我是一个初学者，我想用 html、css 和 java 脚本制作一个小游戏，游戏是我有一个输入和按钮和一个 div（框），我想在输入中写一个颜色（红色、蓝色、绿色和黄色）然后点击按钮，这样背景色 div(box) 就会改变

var myInput = document.getElementById('input-test'),
  myButton = document.getElementById('button-test'),
  myColor = document.getElementById('color-test');

if (myInput === "blue") {
  myButton.onclick = function() {
    'use strict';
    myColor.classList.add('blue');
  };
} else if (myInput == "red") {
  myButton.onclick = function() {
    'use strict';
    myColor.classList.add('red');
  };
}

.in {
  margin-top: 50px;
  height: 40px;
  width: 100px;
  border-radius: 10px;
  border: 2px solid;
}

.vo {
  height: 50px;
  width: 100px;
  border-radius: 20px;
}

.go {
  height: 100px;
  width: 100px;
  background-color: black;
  margin-top: 5px;
  border-radius: 20px;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

<input id="input-test" class="in" type="text" placeholder="Write the color" value="blue">
<button id="button-test" class="vo">click</button>
<div id="color-test" class="go"></div>

【问题讨论】：

不知道为什么要标记这个 C#。
我看不懂标签！！！
您应该添加与您的问题相关的标签。请参阅tagging help 了解更多信息。
use strict 应该在代码的开头，而不是在代码的中间。
虽然use strict 在这个小型概念验证中位于顶部会更好，但它位于函数范围内实际上并没有错。它仅适用于该函数，对于大型代码库中的逐步过渡很有用。

标签： javascript html css

【解决方案1】：

  

  const colors = ['red', 'blue', 'green', 'green', 'yellow', 'maroon', 'black']; //etc
  var myInput = document.getElementById('input-test'),
    myButton = document.getElementById('button-test'),
    myColor = document.getElementById('color-test');
  
    myButton.onclick = function() {
      if(colors.includes(myInput.value)){
        myColor.setAttribute("style", "background-color:" + myInput.value);
      }
    }

.in {
  margin-top: 50px;
  height: 40px;
  width: 100px;
  border-radius: 10px;
  border: 2px solid;
}

.vo {
  height: 50px;
  width: 100px;
  border-radius: 20px;
}

.go {
  height: 100px;
  width: 100px;
  background-color: black;
  margin-top: 5px;
  border-radius: 20px;
}

<input id="input-test" class="in" type="text" placeholder="Write the color" value="blue">
<button id="button-test" class="vo">click</button>
<div id="color-test" class="go"></div>

【讨论】：

【解决方案2】：

你需要获取输入的值，并在用户点击时进行。

您还需要删除其他颜色的类。

var myInput = document.getElementById('input-test'),
  myButton = document.getElementById('button-test'),
  myColor = document.getElementById('color-test');

myButton.onclick = function() {
  if (myInput.value == "blue") {
    myColor.classList.add('blue');
    myColor.classList.remove('red');
  } else if (myInput.value == "red") {
    myColor.classList.add('red');
    myColor.classList.remove('blue');
  };
}

.in {
  margin-top: 50px;
  height: 40px;
  width: 100px;
  border-radius: 10px;
  border: 2px solid;
}

.vo {
  height: 50px;
  width: 100px;
  border-radius: 20px;
}

.go {
  height: 100px;
  width: 100px;
  background-color: black;
  margin-top: 5px;
  border-radius: 20px;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

<input id="input-test" class="in" type="text" placeholder="Write the color" value="blue">
<button id="button-test" class="vo">click</button>
<div id="color-test" class="go"></div>

【讨论】：

非常感谢，但是当我运行我发现蓝色已经写在输入中的代码时，我希望占位符出现在输入中
那么不要在输入中写value="blue"。这是初始值。