时间戳

首页 > 解决方案 > 为什么h3标签没有问题，输入值不能写到函数外？

javascript - 为什么h3标签没有问题，输入值不能写到函数外？

问题描述

var aranan = document.getElementById("myInput")

var h3 = document.getElementsByTagName("h3")
var filter = aranan.value

function myFunction() {
  console.log(filter)
  console.log(h3[0])
}
<body>
  <div class="container">
    <h1 class="word">our store</h1>
    <label for="">
            Search
            <input type="text" placeholder="Ara..." onkeyup="myFunction()" id="myInput">
          </label>

    <div class="menu" id="burasıda-id" data-name="yerel" data-surname="12.05.2020">
      <h2>all</h2>
      <h2>cakes</h2>
      <h2>cupcakes</h2>
      <h2>sweets</h2>
      <h2>dougnuts</h2>
    </div>
    <section>
      <h3 class="first">cake</h3>
      <h3 class="second">cupcake</h3>
      <h3 class="third">sweet</h3>
      <h3 class="fourth">dougnut</h3>
    </section>
  </div>
  <script src="app.js"></script>
</body>

为什么console.log(h3[0])有效但console.log(filter)无效？

当我将其var filter放入函数中时，它也可以工作。

但可能是什么原因？是关于输入值应该在函数中吗？

标签： javascriptdom-events

解决方案

因为此代码在页面加载时立即执行：

var aranan = document.getElementById("myInput")

var h3 = document.getElementsByTagName("h3") 
var filter = aranan.value

当页面第一次加载时，元素没有值：

<input type="text" placeholder="Ara..." onkeyup="myFunction()" id="myInput">

所以filter会是空的。而且由于没有任何东西改变了这个变量，所以它总是空的。

为了在用户输入后捕获该值，您需要在.value输入后读取该属性。内部myFunction似乎是这样做的好地方：

function myFunction() {
  console.log(aranan.value)
  console.log(h3[0])
}

这里的关键区别在于，aranan并且h3持有对在设置这些变量时确实存在的页面元素的引用。但是filter持有一个文字值，并且在您设置该变量时，该输入中没有值。

推荐阅读