OnClick Functions Not Working For HTML Buttons

Question

I have two buttons that are meant to activate my JavaScript functions when clicked, but they don't seem to work. However, when I move my JavaScript function content outside the functions, they work correctly. So the buttons are definitely the problem.

JavaScript:

$(document).ready(function() 
{

function recordjourney() 
{
var journey = JSON.parse(localStorage.getItem('journey'))||[];
journey.push(location.protocol + '//' + location.host + location.pathname);

localStorage.setItem('journey', JSON.stringify(journey));

document.write(journey);
}


function resetjourney() 
{
localStorage.clear()
}

});

HTML:

<p><button name="record" type="button" onclick="recordjourney()">Record Journey</button</p>

<p><button name="reset" type="button" onclick="resetjourney()">Reset Journey</button></p>

You know that document.write(journey); will replace the whole document? — Felix Kling
– Felix Kling, Commented Apr 15, 2012 at 14:13
@Felix Kling Yeah, I just had it there to see if the buttons work. — user1199649
– user1199649, Commented Apr 15, 2012 at 14:21

JohnP · Accepted Answer · 2012-04-15 14:14:03Z

3

The buttons aren't the problem, you have a scope issue since the functions you are calling don't exist on the same level as the buttons.

You can fix that and make your code a bit cleaner by binding to your buttons inside the ready call like so

$(document).ready(function() {
   $('[name="record"]').click(recordjourney);
   $('[name="reset"]').click(resetjourney);    

});

function recordjourney() {
    var journey = JSON.parse(localStorage.getItem('journey')) || [];
    journey.push(location.protocol + '//' + location.host + location.pathname);

    localStorage.setItem('journey', JSON.stringify(journey));

    document.write(journey);
}


function resetjourney() {
    localStorage.clear()
}

<p><button name="record" type="button">Record Journey</button</p>

<p><button name="reset" type="button">Reset Journey</button></p>

Fiddle here - http://jsfiddle.net/7eYNn/

answered Apr 15, 2012 at 14:14

JohnP

50k13 gold badges112 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andrew Over a year ago

Thanks... helped me solve a problem. This is actually an important concept for new JavaScript programmers. And easy to get into trouble with it at any time.

Okan Kocyigit · Accepted Answer · 2012-04-15 14:11:47Z

0

initialize your functions out of $(document).ready().

$(document).ready(function() 
{

});


function resetjourney() 
{
   localStorage.clear()
}


function recordjourney() 
{
  var journey = JSON.parse(localStorage.getItem('journey'))||[];
  journey.push(location.protocol + '//' + location.host + location.pathname);

  localStorage.setItem('journey', JSON.stringify(journey));

  document.write(journey);
}

answered Apr 15, 2012 at 14:11

Okan Kocyigit

13.5k18 gold badges74 silver badges132 bronze badges

Comments

gotofritz · Accepted Answer · 2012-04-15 14:13:49Z

0

Yeah, that's right. If you define a function inside a function, it will be private to that function. You need to create a global var

var recordjourney;
$(document).ready(function(){
 ...
recordjourney = {
  var journey =
 ... etc

Although, of course, given that you are using JQuery I'd do

$(document).ready(function(){
 ...
    $( 'button[name=record]' ).bind( function(){ 
       //put your function here 
    })

and remove the ugly onclick="recordjourney from the button tags.

answered Apr 15, 2012 at 14:13

gotofritz

3,3912 gold badges33 silver badges49 bronze badges

Collectives™ on Stack Overflow

OnClick Functions Not Working For HTML Buttons

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related