Javascript button snap.js

Question

How would I create a Toggle button with snap.js found here https://github.com/jakiestfu/Snap.js the usage section is very brief and I don't understand. Here is some code I came up with. I am new to javascript and any help is appreciated.

<script src="js/snap.min.js"></script>
<script>
 var snapper = new Snap({
  element: document.getElementById('content')
});
   myToggleButton.addEventListener('click', function(){

if( snapper.state().state=="left" ){
    snapper.close();
} else {
    snapper.open('left');
}

});
</script>
</head>

<body>
<button id="myToggleButton">Menu</button>
<div id="content">
This is a menu
</div>

Markup is wrong for the button with id `myToggleButton`. It should be `id="myToggleButton"`. — vivekagr, Apr 09 '14 at 00:45
Put your scripts just before the closing `
` tag. See [this question](http://stackoverflow.com/q/436411/266535). — styfle, Apr 09 '14 at 01:11

score 2 · Accepted Answer · answered Apr 09 '14 at 00:48

You need to get the button element before adding click listener on it. Also, markup for id attribute is wrong on the button.

<script src="js/snap.min.js"></script>
<script>
    var snapper = new Snap({
        element: document.getElementById('content')
    });

    // Get the button
    var myToggleButton = document.getElementById('myToggleButton');

    myToggleButton.addEventListener('click', function(){

        if( snapper.state().state=="left" ){
            snapper.close();
        } else {
            snapper.open('left');
        }

    });
</script>
</head>

<body>
<button id="myToggleButton">Menu</button>
<div id="content">
    This is a menu
</div>

EDIT: Updated the answer to use document.getElementById rather than jQuery.

user1967 · Answer 2 · 2014-04-09T01:04:49.350

It looks like there's an error in your JavaScript (unless you've omitted some code.)

var snapper = new Snap({
  element: document.getElementById('content')
});

// you need to grab a reference to this node before you can add the event listener
var myToggleButton = document.getElementById('myToggleButton'); 

myToggleButton.addEventListener('click', function(){

  if( snapper.state().state=="left" ){
    snapper.close();
  } else {
    snapper.open('left');
  }

});

score 0 · Answer 3 · answered Apr 07 '15 at 10:39

0

addEvent(document.getElementById('toggleButton'), 'click', function(){
 if( snapper.state().state=="left" ){
        snapper.close();
    } else {
        snapper.open('left');
    }
});

answered Apr 07 '15 at 10:39

Vad Yakupov

15
7

explain what you are trying to say. – Kumar Apr 07 '15 at 10:57

Javascript button snap.js

3 Answers3