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

Question

我有这个 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

您有一些错误：

关键字是 className 而不是 classname。请更改它。
您已经获得 .value。不用再调用了。

更正代码：

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

Answer 2

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;
    }
}

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

Answer 3

您的价值观加倍：

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

test 已经是该输入的值，这意味着它是一个纯字符串。一个字符串没有 .value 属性，所以你正在做 undefined === "hello".

Also use className not classname
              ^             ^

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

Change the style of an input when submit is pressed

html

javascript

css

onclick

jsfiddle