Question

我正在尝试清除JavaScript中的输入文本字段，但我无法让它工作。

HTML：

<div class="myclass" id="text_answer"><input type="text" /></div>

JS：

function clearAnswerArea(){
    var answerBoxItem = document.getElementById("text_answer");
    console.log("value:"+answerBoxItem.value+" box: "+answerBoxItem); 
    answerBoxItem.value = "";  #does nothing
    #answerBoxItem.innerHTML = ""; #this hides the text field
    answerBoxItem.setAttribute("style","background-color:"+yellowBoxColour); #this sets the background behind the text field to yellow

}

我在文本框中键入了一些文本，然后重新加载了页面，而该页面又调用了clearAnswerArea函数，但在控制台中我得到了：

value:undefined box: [object HTMLDivElement]

文字仍在文本框中。我知道我正在使用正确的ID，因为正在设置背景颜色。

任何线索？

Answer 1

document.getElementById("text_answer");

获取具有匹配ID的元素。

<div class="myclass" id="text_answer">

这是一个div。

Divs没有value属性。

您需要获得输入。

var answerBoxItem = document.querySelector("#text_answer input");

Answer 2

你需要用id清除项目 - 这个id在父div上 - 而不是输入 - 所以要么改变选择器要么改变代码 - 例如 - 将id放入输入而不是父div：< / p>

<div class="myclass"><input type="text" id="text_answer" name="text-answer" /></div>

Answer 3

answerBoxItem.value =“”; #does nothing

这不会做任何事情，因为 answerBoxItem 是div而不是input元素而div没有value属性/属性。

如果要清除answerBoxItem中的输入字段，请尝试

answerBoxItem.children[0].value = "";

Javascript设置输入文本字段值不起作用

3 个答案: