为什么我们不能使用 DOM getElementsByClassName 选择的变量的 addEventListener？

【问题标题】：Why we can't use addEventListener of variable that has been selected by DOM getElementsByClassName?为什么我们不能使用 DOM getElementsByClassName 选择的变量的 addEventListener？
【发布时间】：2021-09-21 00:53:57
【问题描述】： 

btn = document.getElementsByClassName('btn');
value = document.getElementById('value');

let counter = 0;

btn[2].addEventListener('click', function() {
  if (btn[2].classList.contains('decrease')) counter -= 1;
  if (btn[2].classList.contains('reset')) counter = 0;
  if (btn[2].classList.contains('increase')) counter += 1;
  value.innerText = counter;
});
/*
=============== 
Fonts
===============
*/

@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");

/*
=============== 
Variables
===============
*/

:root {
  /* dark shades of primary color*/
  --clr-primary-1: hsl(205, 86%, 17%);
  --clr-primary-2: hsl(205, 77%, 27%);
  --clr-primary-3: hsl(205, 72%, 37%);
  --clr-primary-4: hsl(205, 63%, 48%);
  /* primary/main color */
  --clr-primary-5: hsl(205, 78%, 60%);
  /* lighter shades of primary color */
  --clr-primary-6: hsl(205, 89%, 70%);
  --clr-primary-7: hsl(205, 90%, 76%);
  --clr-primary-8: hsl(205, 86%, 81%);
  --clr-primary-9: hsl(205, 90%, 88%);
  --clr-primary-10: hsl(205, 100%, 96%);
  /* darkest grey - used for headings */
  --clr-grey-1: hsl(209, 61%, 16%);
  --clr-grey-2: hsl(211, 39%, 23%);
  --clr-grey-3: hsl(209, 34%, 30%);
  --clr-grey-4: hsl(209, 28%, 39%);
  /* grey used for paragraphs */
  --clr-grey-5: hsl(210, 22%, 49%);
  --clr-grey-6: hsl(209, 23%, 60%);
  --clr-grey-7: hsl(211, 27%, 70%);
  --clr-grey-8: hsl(210, 31%, 80%);
  --clr-grey-9: hsl(212, 33%, 89%);
  --clr-grey-10: hsl(210, 36%, 96%);
  --clr-white: #fff;
  --clr-red-dark: hsl(360, 67%, 44%);
  --clr-red-light: hsl(360, 71%, 66%);
  --clr-green-dark: hsl(125, 67%, 44%);
  --clr-green-light: hsl(125, 71%, 66%);
  --clr-black: #222;
  --ff-primary: "Roboto", sans-serif;
  --ff-secondary: "Open Sans", sans-serif;
  --transition: all 0.3s linear;
  --spacing: 0.1rem;
  --radius: 0.25rem;
  --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  --max-width: 1170px;
  --fixed-width: 620px;
}


/*
=============== 
Global Styles
===============
*/

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--ff-secondary);
  background: var(--clr-grey-10);
  color: var(--clr-grey-1);
  line-height: 1.5;
  font-size: 0.875rem;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  letter-spacing: var(--spacing);
  text-transform: capitalize;
  line-height: 1.25;
  margin-bottom: 0.75rem;
  font-family: var(--ff-primary);
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 0.875rem;
}

p {
  margin-bottom: 1.25rem;
  color: var(--clr-grey-5);
}

@media screen and (min-width: 800px) {
  h1 {
    font-size: 4rem;
  }
  h2 {
    font-size: 2.5rem;
  }
  h3 {
    font-size: 1.75rem;
  }
  h4 {
    font-size: 1rem;
  }
  body {
    font-size: 1rem;
  }
  h1,
  h2,
  h3,
  h4 {
    line-height: 1;
  }
}


/*  global classes */


/* section */

.section {
  padding: 5rem 0;
}

.section-center {
  width: 90vw;
  margin: 0 auto;
  max-width: 1170px;
}

@media screen and (min-width: 992px) {
  .section-center {
    width: 95vw;
  }
}

main {
  min-height: 100vh;
  display: grid;
  place-items: center;
}


/*
=============== 
Counter
===============
*/

main {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.container {
  text-align: center;
}

#value {
  font-size: 6rem;
  font-weight: bold;
}

.btn {
  text-transform: uppercase;
  background: transparent;
  color: var(--clr-black);
  padding: 0.375rem 0.75rem;
  letter-spacing: var(--spacing);
  display: inline-block;
  transition: var(--transition);
  font-size: 0.875rem;
  border: 2px solid var(--clr-black);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  border-radius: var(--radius);
  margin: 0.5rem;
}

.btn:hover {
  color: var(--clr-white);
  background: var(--clr-black);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Counter</title>

  <!-- styles -->
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <main>
    <div class="container">
      <h1>
        counter
      </h1>
      <span id="value">0</span>
      <div class="button-container">
        <button class="btn decrease">decrease</button>
        <button class="btn reset">reset</button>
        <button class="btn increase">increase</button>
      </div>
    </div>
  </main>
  <!-- javascript -->
  <script src="app.js"></script>
</body>

</html>

当我单击其数组中索引为 2 的增加按钮时，value 值不会增加。

btn = document.getElementsByClassName('btn'); 

btn[2].addEventListener('click', function() {
  if (btn[2].classList.contains('decrease')) counter -= 1;
  if (btn[2].classList.contains('reset')) counter = 0;
  if (btn[2].classList.contains('decrease')) counter += 1;
  value.innerText = counter;
});

【问题讨论】：

  • 错字。你的 JS 减少了两次，增加了一次。

标签： javascript html css arrays dom


【解决方案1】：

遍历 NodeList 并为所有按钮添加一个事件侦听器。然后通过检查事件目标的classList来检查它是哪个按钮。

btn = document.getElementsByClassName('btn');
value = document.getElementById('value');

let counter = 0;

Array.from(btn).forEach((e) => {e.addEventListener('click', function(e) {
    if (e.target.classList.contains('decrease')) counter -= 1;
    if (e.target.classList.contains('reset')) counter = 0;
    if (e.target.classList.contains('increase')) counter += 1;
    value.innerText = counter;
  })
});
/*
=============== 
Fonts
===============
*/

@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");

/*
=============== 
Variables
===============
*/

:root {
  /* dark shades of primary color*/
  --clr-primary-1: hsl(205, 86%, 17%);
  --clr-primary-2: hsl(205, 77%, 27%);
  --clr-primary-3: hsl(205, 72%, 37%);
  --clr-primary-4: hsl(205, 63%, 48%);
  /* primary/main color */
  --clr-primary-5: hsl(205, 78%, 60%);
  /* lighter shades of primary color */
  --clr-primary-6: hsl(205, 89%, 70%);
  --clr-primary-7: hsl(205, 90%, 76%);
  --clr-primary-8: hsl(205, 86%, 81%);
  --clr-primary-9: hsl(205, 90%, 88%);
  --clr-primary-10: hsl(205, 100%, 96%);
  /* darkest grey - used for headings */
  --clr-grey-1: hsl(209, 61%, 16%);
  --clr-grey-2: hsl(211, 39%, 23%);
  --clr-grey-3: hsl(209, 34%, 30%);
  --clr-grey-4: hsl(209, 28%, 39%);
  /* grey used for paragraphs */
  --clr-grey-5: hsl(210, 22%, 49%);
  --clr-grey-6: hsl(209, 23%, 60%);
  --clr-grey-7: hsl(211, 27%, 70%);
  --clr-grey-8: hsl(210, 31%, 80%);
  --clr-grey-9: hsl(212, 33%, 89%);
  --clr-grey-10: hsl(210, 36%, 96%);
  --clr-white: #fff;
  --clr-red-dark: hsl(360, 67%, 44%);
  --clr-red-light: hsl(360, 71%, 66%);
  --clr-green-dark: hsl(125, 67%, 44%);
  --clr-green-light: hsl(125, 71%, 66%);
  --clr-black: #222;
  --ff-primary: "Roboto", sans-serif;
  --ff-secondary: "Open Sans", sans-serif;
  --transition: all 0.3s linear;
  --spacing: 0.1rem;
  --radius: 0.25rem;
  --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  --max-width: 1170px;
  --fixed-width: 620px;
}


/*
=============== 
Global Styles
===============
*/

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--ff-secondary);
  background: var(--clr-grey-10);
  color: var(--clr-grey-1);
  line-height: 1.5;
  font-size: 0.875rem;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  letter-spacing: var(--spacing);
  text-transform: capitalize;
  line-height: 1.25;
  margin-bottom: 0.75rem;
  font-family: var(--ff-primary);
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 0.875rem;
}

p {
  margin-bottom: 1.25rem;
  color: var(--clr-grey-5);
}

@media screen and (min-width: 800px) {
  h1 {
    font-size: 4rem;
  }
  h2 {
    font-size: 2.5rem;
  }
  h3 {
    font-size: 1.75rem;
  }
  h4 {
    font-size: 1rem;
  }
  body {
    font-size: 1rem;
  }
  h1,
  h2,
  h3,
  h4 {
    line-height: 1;
  }
}


/*  global classes */


/* section */

.section {
  padding: 5rem 0;
}

.section-center {
  width: 90vw;
  margin: 0 auto;
  max-width: 1170px;
}

@media screen and (min-width: 992px) {
  .section-center {
    width: 95vw;
  }
}

main {
  min-height: 100vh;
  display: grid;
  place-items: center;
}


/*
=============== 
Counter
===============
*/

main {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.container {
  text-align: center;
}

#value {
  font-size: 6rem;
  font-weight: bold;
}

.btn {
  text-transform: uppercase;
  background: transparent;
  color: var(--clr-black);
  padding: 0.375rem 0.75rem;
  letter-spacing: var(--spacing);
  display: inline-block;
  transition: var(--transition);
  font-size: 0.875rem;
  border: 2px solid var(--clr-black);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  border-radius: var(--radius);
  margin: 0.5rem;
}

.btn:hover {
  color: var(--clr-white);
  background: var(--clr-black);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Counter</title>

  <!-- styles -->
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <main>
    <div class="container">
      <h1>
        counter
      </h1>
      <span id="value">0</span>
      <div class="button-container">
        <button class="btn decrease">decrease</button>
        <button class="btn reset">reset</button>
        <button class="btn increase">increase</button>
      </div>
    </div>
  </main>
  <!-- javascript -->
  <script src="app.js"></script>
</body>

</html>

【讨论】：

    【解决方案2】：

    首先，您在第三条if 声明中出现错字

    if (btn[2].classList.contains('increase')) counter += 1;

    而不是

    if (btn[2].classList.contains('decrease')) counter += 1;

    其次，更普遍的是：

    let onClickUpdate = function() {
  if (this.classList.contains('decrease')) counter -= 1;
  if (this.classList.contains('reset')) counter = 0;
  if (this.classList.contains('increase')) counter += 1;
  value.innerText = counter;
};

//btn[0].addEventListener('click', onClickUpdate);
//btn[1].addEventListener('click', onClickUpdate);
btn[2].addEventListener('click', onClickUpdate);

    【讨论】：

      猜你喜欢
      • 2023-04-02
      • 1970-01-01
      • 2023-04-06
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-04-07
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode