Javascript事件侦听器返回null
Javascript事件侦听器返回null
提问于 2018-07-30 02:21:04
我是JavaScript的新手，我正在尝试建立一个简单的脚本，将在控制台日志中显示输入到文本区的字符数。
下面是我的html：
<section class="hero is-info">
<div class="hero-body">
<div class="container">
<div class="card">
<div class="card-content">
<div class="content">
<div class="control has-icons-left has-icons-right">
<input class="input is-large" type="search" placeholder="" /><span class="icon is-medium is-left"><i class="fa fa-search"></i></span><span class="icon is-medium is-right"><i class="fa fa-empire"></i></span>
</div>
</div>
</div>
</div>
</div>下面是我的js：
const testArea = document.querySelector("#card-content");
function openDropDown(){
let textEnteredLength = testArea.value.length;
console.log(textEnteredLength);
}
testArea.addEventListener("keypress", openDropDown, false);下面是我的错误：
TypeError: testArea is nullLearn More
我不明白为什么testArea看起来是空的，因为我在第一行定义了它。
回答 3
Stack Overflow用户
发布于 2018-07-30 02:25:09
您必须将id card-content添加到input标记，如下所示-
const testArea = document.querySelector("#card-content");
function openDropDown() {
let textEnteredLength = testArea.value.length;
console.log(textEnteredLength);
}
testArea.addEventListener("keypress", openDropDown, false);<section class="hero is-info">
<div class="hero-body">
<div class="container">
<div class="card">
<div class="card-content">
<div class="content">
<div class="control has-icons-left has-icons-right">
<input id="card-content" class="input is-large" type="search" placeholder="" /><span class="icon is-medium is-left"><i class="fa fa-search"></i></span><span class="icon is-medium is-right"><i class="fa fa-empire"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Stack Overflow用户
发布于 2018-07-30 02:29:12
您需要一个id来选择要向其添加事件侦听器的DOM元素。
<section class="hero is-info">
<div class="hero-body">
<div class="container">
<div class="card">
<div class="card-content">
<div class="content">
<div class="control has-icons-left has-icons-right">
<input class="input is-large" id="card-content" type="search" placeholder="" /><span class="icon is-medium is-left"><i class="fa fa-search"></i></span><span class="icon is-medium is-right"><i class="fa fa-empire"></i></span>
</div>
</div>
</div>
</div>
</div>
<script>
const testArea = document.getElementById("card-content");//selects element with id 'card-content'
function openDropDown(){
let textEnteredLength = testArea.value.length;
console.log(textEnteredLength);
}
testArea.addEventListener("keypress", openDropDown, false);
</script>
还可以按元素的类选择元素。
<section class="hero is-info">
<div class="hero-body">
<div class="container">
<div class="card">
<div class="card-content">
<div class="content">
<div class="control has-icons-left has-icons-right">
<input class="input is-large" type="search" placeholder="" /><span class="icon is-medium is-left"><i class="fa fa-search"></i></span><span class="icon is-medium is-right"><i class="fa fa-empire"></i></span>
</div>
</div>
</div>
</div>
</div>
<script>
const testArea = document.querySelector("input.input.is-large");
//selects first input element with class of input and is-large
function openDropDown(){
let textEnteredLength = testArea.value.length;
console.log(textEnteredLength);
}
testArea.addEventListener("keypress", openDropDown, false);
</script>
Stack Overflow用户
发布于 2018-07-30 02:43:39
您还可以使用属性onkeyup并调用函数openDropDown()并将this作为参数传递给input元素，以检查输入字段中输入的字符数。
function openDropDown(input){
console.log(input.value.length)
} <section class="hero is-info">
<div class="hero-body">
<div class="container">
<div class="card">
<div class="card-content">
<div class="content">
<div class="control has-icons-left has-icons-right">
<input class="input is-large" type="search" placeholder="" onkeyup="openDropDown(this)" /><span class="icon is-medium is-left"><i class="fa fa-search"></i></span><span class="icon is-medium is-right"><i class="fa fa-empire"></i></span>
</div>
</div>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51583253
复制相关文章
相似问题