javascript - 按下提交时更改输入的样式

Question

https://jsfiddle.net/3vz45os8/7/

我有这个 jsfiddle，如果单词类型正确，我想将输入文本的背景颜色更改为特定颜色，如果单词类型错误，则更改为另一种颜色。它目前不起作用，但我在控制台中没有收到任何错误。如果你们能帮助我。

这是 js 函数，我记录了每一步并且没有得到错误:

function isCorrect() {
  var test = document.getElementById('test').value;
  if (test.value === "hello") {
    test.classname = "correct"
    return true;
  } else {
    test.classname = "incorrect"
    return false;
  }
}

Answer 1

var test = document.getElementById('test').value;
if (test.value === "hello") {

您正在调用 .value 两次。把它从第一行拿掉，因为否则你将把 className(顺便说一句，它应该是驼峰式的)添加到字符串值而不是输入元素。

这是更正后的代码和一个 working copy :

function isCorrect() {
    var test = document.getElementById('test');
    if (test.value === "hello") {
        test.className = "correct";
        return true;
    } else {
        test.className = "incorrect";
        return false;
    }
}

它正确地添加了类，但是你的 CSS 被覆盖了，所以我只是删除了插图的默认颜色。