Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by stian wilks johansen
stian wilks johansen
11,053 Points

can som one help me connect the the button

var $buttonAlert = $("#button");

$buttonAlert.bind( "click", function() {
  alert( "test" );
});

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header class="main-header">
     <nav class="main-nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
     </nav>
    </header>
    <p>
      <button id="testbutton">menu</button>
    </p>
    <script src="test.js"></script>
  </body>
</html>

2 Answers

Luke Pettway
Luke Pettway
16,593 Points

The issue is your dom cache variable selector , you are trying to select an element with the id of button, but there isn't an element like that. The id of the button you have is "testbutton" so that is the selector you want to use, unless you are trying to make the click work on all buttons in which case "button" by itself should work. 

//Change the selector from #button to #testbutton
var $buttonAlert = $("#testbutton");

$buttonAlert.bind( "click", function() {
  alert( "test" );
});
stian wilks johansen
stian wilks johansen
11,053 Points

its still not working. I dont get the alert window up when Ipress the button. I was trying stuff out and forgot to put it it to testbutton.

Luke Pettway
Luke Pettway
16,593 Points

Is this for a challenge? If so could you link which one it is?

Here is a CodePen with the alert working: http://codepen.io/lukepettway/pen/xVOwWV

stian wilks johansen
stian wilks johansen
11,053 Points

its not a callenge i was just trying stuff out and was wondering if someone could help

stian wilks johansen
stian wilks johansen
11,053 Points

its not working in chrome but in codepen its working fine

Luke Pettway
Luke Pettway
16,593 Points

OH, I see the problem now, you need to include jQuery, the $() function is unique to it. Add it to your footer like this:

<

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header class="main-header">
     <nav class="main-nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
     </nav>
    </header>
    <p>
      <button id="testbutton">menu</button>
    </p>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="test.js"></script>
  </body>
</html>
stian wilks johansen
stian wilks johansen
11,053 Points

Thanks man

Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

Right on! this is the correct way of adding a click event to the button. Good eye!