Question

我试图使用纯JavaScript找到className的输入值。当我运行类似的代码和ID它工作，但当我尝试使用类名时，它返回undefined。我可以用jQuery做到这一点，但我想用纯JavaScript来实现它，以便更好地理解语言。谢谢！

JAVASCRIPT

var input1 = document.getElementsByClassName("blank1");
var submit = document.getElementsByClassName("submit");

correctAnswer = 'hello';

submit[0].addEventListener('click', checkFillIn);

function checkFillIn(){
    if ( input1[0].value === correctAnswer ){
        console.log('correct!');
    }else{
        console.log('incorrect');
    }
}

HTML

<p><input id="blank1" value="" type="text"></input></p>
<a href="#" class="submit">Submit</a>

Answer 1

请在输入元素上添加class属性。见下面的例子：

<input id="blank1" class="blank1" value="" type="text">

当然，您不希望将id与class属性相同。

Answer 2

Ot返回undefined，因为语法中有错误：

getElementsByClassName(blank1)

blank1是ID而不是类

这应该有效：

＆＃13;

var input1 = document.getElementById("blank1");
var submit = document.getElementsByClassName("submit");

correctAnswer = 'hello';

// submit is an array getElementsByClassName returns an array of elements
submit[0].addEventListener('click', checkFillIn);

function checkFillIn(){
    if ( input1.value === correctAnswer ){
        console.log('correct!');
    }else{
        console.log('incorrect');
    }
}

＆＃13;

<p><input id="blank1" value="" type="text"></input></p>
<a href="#" class="submit">Submit</a>

＆＃13;

Answer 3

您的代码中的错误位于第1行，您将获得javascript中的第一个元素。它应该是： var input1 = document.getElementById("blank1"); 这是因为blank1是ID，而不是类名。希望这有帮助！

Answer 4

您需要将var input1 = document.getElementsByClassName("blank1");更改为var input1 = document.getElementsById("blank1");或将class="blank1"添加到您的输入中。

检查ByClassName时未定义的输入值

4 个答案: