Question

我是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 null[Learn More]

自从我在第一行中定义testArea以来，为什么{{1}}似乎为空。

Answer 1

您必须像这样向card-content标签添加ID 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>

Answer 2

您需要一个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>

Answer 3

您还可以使用属性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>

javascript事件侦听器返回null

3 个答案: