Question

我是JavaScript新手，无法解决此问题

错误：btn.addEventListener不是函数

它在我使用查询选择器时有效，但在我使用getElementByClassName时不起作用

HTML

<input type="text" class="amount">
     <select>
                <option class="option" value="1">Good</option>
                <option class="option" value="2">Ok</option>
                <option class="option" value="3">Bad</option>
            </select>
 <button class="btn"> Calculate </button>

JavaScript

const amount = document.getElementsByClassName('amount');
const btn = document.getElementsByClassName('btn');

btn.addEventListener('click', a());

function a() {
  alert('100');
}

警报会在窗口加载时触发！

Answer 1

要在HTML元素可用之前访问它们，以避免使用$(document).ready。

document.getElementsByClassName 是一个数组。

addEventListener 函数接受函数定义，您正在调用函数addEventListener('click',a())。应该是addEventListener('click',a)

$( document ).ready(function() {


  const amount = document.getElementsByClassName('amount')[0];
  const btn = document.getElementsByClassName('btn')[0];

  btn.addEventListener('click', a);

  function a() {
    alert('100');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="amount">
<select>
    <option class="option" value="1">Good</option>
    <option class="option" value="2">Ok</option>
    <option class="option" value="3">Bad</option>
</select>
<button class="btn"> Calculate </button>

错误：当我使用getElementByClassName时，addEventListener不是函数

1 个答案: