CODEWITHSUNDEEP
javascriptaddeventlistener
Charlie-Greenman
Charlie-Greenman

Reputation: 1659

AddEventListener only working with Id and not class

Trying to create a white box when the first button has been clicked. Oddly enough it only works when I attach an even handler to the I.D. and not to a class. I am either using addEventListener with Class wrong, or calling Class the wrong way. Feel free to correct and thank you!

This is working with ID

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';
  }

}
/* 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 id="bttn"></button>
    <button id="bttn"></button>
    <div id="box"></div>
  </div>
</body>

This is working with Class

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';
  }

}
/* 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>

Once again, my eternal thanks!

Upvotes: 1

Views: 2786

Answers (3)

jkd
jkd

Reputation: 1045

The getElementsByClassName function returns a array containing the elements. Therefore, you will need to iterate over the elements and add a event listener to each item in the array.

ex:

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

Upvotes: 1

Jenish Rabadiya
Jenish Rabadiya

Reputation: 6766

need to iterate over array of element element while getElementByClassName is called as it returns array of the elements.

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';
  }

}

Upvotes: 3

AstroCB
AstroCB

Reputation: 12367

This yields the following error:

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

This error occurs because you're calling addEventListener on getElementsByClassName, which returns a NodeList (which is basically an array of elements).

Because it's an array of elements (it is getElementsByClassName, after all), you have to either select one element from the array or loop through and add it to all of them.

In this case, the former is fine (there's only one that you want to add it to, for now), but the latter is a safer way of doing it:

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

Also note that in the CSS, you changed the box selector to a class as well, without changing box to a class. You don't need to do this:

#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>

Upvotes: 2

Related Questions