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>

Answer 1

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/