AddEventListener仅与Id一起使用而不是类

时间：2015-02-24 05:03:50

标签： javascript addeventlistener

单击第一个按钮时尝试创建白框。奇怪的是，只有当我将一个偶数处理程序附加到I.D.而不是一个班级。我要么使用类错误的addEventListener，要么以错误的方式调用Class。随意纠正并谢谢你！

这与ID

一起使用

＆＃13;
＆＃13; 
document.addEventListener('DOMContentLoaded',domloaded,false);
function domloaded(){
  var bttn = document.getElementById('bttn');


   bttn.addEventListener('click', draw, true);

  function draw(){

   var box = document.getElementById('box');
    box.style.background = 'white';
    box.style.display = 'block';
  }

}
＆＃13; 
/* line 5, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

/* line 22, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
html {
  line-height: 1;
}

/* line 24, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
ol, ul {
  list-style: none;
}

/* line 26, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* line 28, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

/* line 30, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
  quotes: none;
}
/* line 103, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

/* line 32, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
a img {
  border: none;
}

/* line 116, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

/* line 3, ../sass/main.scss */
body {
  background-color: darkred;
  width: 100%;
  height: 100%;
}

/* line 9, ../sass/main.scss */
button {
  float: left;
  width: 50%;
  height: 10%;
  background: yellow;
}

/* line 16, ../sass/main.scss */
#box {
  float: left;
  width: 50%;
  height: 70%;
  background: blue;
  display: none;
}

/* line 24, ../sass/main.scss */
#drawing_container {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 300px;
  height: 300px;
  background-color: black;
  color: white;
}
＆＃13; 
<body>
  <div id="drawing_container">
    <button id="bttn"></button>
    <button id="bttn"></button>
    <div id="box"></div>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

这适用于Class

＆＃13;
＆＃13; 
document.addEventListener('DOMContentLoaded',domloaded,false);
function domloaded(){
  var bttn = document.getElementsByClassName('bttn');


   bttn.addEventListener('click', draw, true);

  function draw(){

   var box = document.getElementById('box');
    box.style.background = 'white';
    box.style.display = 'block';
  }

}
＆＃13; 
/* line 5, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

/* line 22, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
html {
  line-height: 1;
}

/* line 24, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
ol, ul {
  list-style: none;
}

/* line 26, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* line 28, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

/* line 30, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
  quotes: none;
}
/* line 103, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

/* line 32, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
a img {
  border: none;
}

/* line 116, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

/* line 3, ../sass/main.scss */
body {
  background-color: darkred;
  width: 100%;
  height: 100%;
}

/* line 9, ../sass/main.scss */
button {
  float: left;
  width: 50%;
  height: 10%;
  background: yellow;
}

/* line 16, ../sass/main.scss */
.box {
  float: left;
  width: 50%;
  height: 70%;
  background: blue;
  display: none;
}

/* line 24, ../sass/main.scss */
#drawing_container {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 300px;
  height: 300px;
  background-color: black;
  color: white;
}
＆＃13; 
<body>
  <div id="drawing_container">
    <button class="bttn"></button>
    <button class="bttn"></button>
    <div id="box"></div>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

再次，我的永恒感谢！

3 个答案:

答案 0 :(得分：3)

需要迭代元素元素数组，同时调用getElementByClassName，因为它返回元素数组。

document.addEventListener('DOMContentLoaded',domloaded,false);
function domloaded(){


  var bttn = document.getElementsByClassName('bttn');

  for(var i = 0; i < bttn.length; i++) {
      bttn[i].addEventListener("click", draw, true);
  }


  function draw(){

   var box = document.getElementById('box');
    box.style.background = 'white';
    box.style.display = 'block';
  }

}

答案 1 :(得分：2)

这会产生以下错误：

[Error] TypeError: undefined is not a function (evaluating 'bttn.addEventListener('click', draw, true)')
domloaded (js, line 125)

发生此错误的原因是您在addEventListener上调用getElementsByClassName，它返回一个NodeList（基本上是一个元素数组）。

因为它是一个元素数组（毕竟是 getElement s ByClassName），你必须从数组中选择一个元素或循环并添加它对所有人来说。

在这种情况下，前者很好（目前只有一个你想要添加它），但后者是一种更安全的方式：

var bttn = document.getElementsByClassName("bttn");
for(var i = 0; i < bttn.length; i++) {
  bttn[i].addEventListener("click", draw, true);
}

另请注意，在CSS中，您还将box选择器更改为类，而不将box更改为类。你不需要这样做：

#box {
  float: left;
  width: 50%;
  height: 70%;
  background: blue;
  display: none;
}


document.addEventListener('DOMContentLoaded', domloaded, false);

function domloaded() {
  var bttn = document.getElementsByClassName('bttn');
  for (var i = 0; i < bttn.length; i++) {
    bttn[i].addEventListener("click", draw, true);
  }

  function draw() {
    var box = document.getElementById('box');
    box.style.background = 'white';
    box.style.display = 'block';
  }

}
/* line 5, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
/* line 22, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */

html {
  line-height: 1;
}
/* line 24, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */

ol,
ul {
  list-style: none;
}
/* line 26, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */

table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* line 28, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */

caption,
th,
td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}
/* line 30, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */

q,
blockquote {
  quotes: none;
}
/* line 103, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */

q:before,
q:after,
blockquote:before,
blockquote:after {
  content: "";
  content: none;
}
/* line 32, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */

a img {
  border: none;
}
/* line 116, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
/* line 3, ../sass/main.scss */

body {
  background-color: darkred;
  width: 100%;
  height: 100%;
}
/* line 9, ../sass/main.scss */

button {
  float: left;
  width: 50%;
  height: 10%;
  background: yellow;
}
/* line 16, ../sass/main.scss */

#box {
  float: left;
  width: 50%;
  height: 70%;
  background: blue;
  display: none;
}
/* line 24, ../sass/main.scss */

#drawing_container {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 300px;
  height: 300px;
  background-color: black;
  color: white;
}
<body>
  <div id="drawing_container">
    <button class="bttn"></button>
    <button class="bttn"></button>
    <div id="box"></div>
  </div>
</body>

答案 2 :(得分：1)

getElementsByClassName函数返回包含元素的数组。因此，您需要迭代元素并为数组中的每个项添加事件侦听器。

例如：

for(var i = 0; i < bttn.length; i++){
    bttn[i].addEventListener("click",draw,true)
}
相关问题
最新问题