javascript - 根据文本的值更改文本的颜色，通过带有 Javascript 的按钮

Question

我是整个 html、css 和 javascript 世界的新手。我需要创建一个按钮，该按钮根据文本框中写入的值更改范围内文本的颜色。

这是我到目前为止写的:

function changeColor() {
  var span = document.querySelector("span");
  if (span = 'purple') {
    span.style.color = 'purple';
  }
}

.color {
  color: white;
  background-color: black;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.purple {
  background-color: purple;
}

<form>
  <span>This text changes color</span>
  <div>
    <input type="text" value="Type your input here">
  </div>
  <div>
    <input type="button" value="Add Color" onclick="changeColor()">
    <input type="button" value="Clear all colors" onclick="ClearColors()">
  </div>
</form>
<script type="text/javascript" src="Homework3.js"></script>

Answer 1

您可以使用文本输入的值 作为类名。然后您可以使用 classList.add() 属性在 span 元素上添加类。您也不需要清除按钮。您可以使用 classList.remove() 属性在同一函数中删除类。

尝试以下方式:

var span = document.querySelector("span");
var prevColor = '';
function changeColor() {
  var currentColor = document.querySelector("input[type='text']").value.trim();
  if(prevColor != '')
    span.classList.remove(prevColor);
  if(currentColor != ''){
    span.classList.add(currentColor);
    prevColor = currentColor;
  }
}

.color {
    color:white;
    background-color: black;
}
.red {
    background-color: red;
}

.blue {
    background-color: blue;
}

.yellow {
    background-color: yellow;
}

.purple {
    background-color: purple;
}

<span>This text changes color</span>
<div>
    <input type="text" placeholder="Type your input here">
</div>
<div>
    <input type="button" value="Add Color" onclick="changeColor()">
</div>