undroid undroid - 4 years ago 245
HTML Question

jQuery: navigate to another page by clicking a button

I'm learning JavaScript and jQuery. I'm trying to build a simple web page with buttons that navigate to another page upon click via a switch-case statement.

I've added a local jQuery script to my .html file, but nothing seems to happen when I click the buttons.

Demo can be found here: http://jsfiddle.net/VmYLy/

The html code is:

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

$("input[type='button']").click(function() {
switch(this.id) {
case 'x':
window.location.href = "http://google.com";
break;
case 'y':
window.location.href = "http://yahoo.com";
break;
case 'z':
window.location.href = "http://stackoverflow.com";
break;
}
});
</head>

<body>
<input type="button" value="google" style="width:120px" id="x"><br>
<input type="button" value="yahoo" style="width:120px" id="y"><br>
<input type="button" value="stackoverflow" style="width:120px" id="z"><br>
</body>

Answer Source

It works fine in fiddle. only prob i can think of is to wrap your code in ready(). This might not be causing problem in fiddle since you've selected onLoad option.

$(document).ready(function(){
    $("input[type='button']").click(function() {
        switch(this.id) {
            case 'x':window.location.href = "http://google.com"; break;
            case 'y': window.location.href="http://yahoo.com"; break;
            case 'z': window.location.href = "http://stackoverflow.com"; break;
        }
    });
})
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download