addEventListener

Question

I want my div to expand when you click on it to 500px using pure javaScript only. I am working on my js skill. What am I doing wrong here?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
     <link rel="stylesheet" href="css/styles.css" media="screen" title="no title" charset="utf-8">
    <title> Css | JavaScript</title>
  </head>
  <body>
      <section>
          <div id="mydiv">

          </div>
      </section>

      <script src="js/main.js"></script>
  </body>
</html>

#mydiv {
    width:300px;
    height:300px;
    background:tomato;
    color:#fff;
    border-radius:50%;
    margin:100px auto;
    box-shadow:1px 2px 5px;
}

function changeSize() {
   var getId = document.getElementById('mydiv');
    getId = this;
    this.style.width = '500px';
    this.style.height = '500px';
    this.style.background = "crimson";
    getId.addEventListner("click",changeSize, false)
}

changeSize();

Answer 1 · 2015-07-01T06:59:26Z

July 1, 2015 6:59am

You are adding the event listener within the changeSize function. What you need to do is call changeSize as the eventHandler function. You add the event listeners outside the function, then the target of the event is passed into the callback function, so you can automatically use 'this' to reference it. It also means that your changeSize function can be called on any element, so your code becomes more flexible and reuseable.

Should read something like this:

function changeSize() {
    this.style.width = '500px';
    this.style.height = '500px';
    this.style.background = "crimson";
}

 var getId = document.getElementById('mydiv');
getId.addEventListner("click", changeSize);

'''
Hope this helps

Answer 2 · 2015-07-01T12:56:43Z

July 1, 2015 12:56pm

Thank you . I understand it now.

Welcome to the Treehouse Community

Looking to learn something new?

Abe Layee

Abe Layee

addEventListener

2 Answers

Tim Signore

Tim Signore

Abe Layee

Abe Layee