我是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
看起来是空的,因为我在第一行定义了它。
发布于 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>
发布于 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>
发布于 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>
https://stackoverflow.com/questions/51583253
复制相似问题