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

April Wright
April Wright
8,338 Points
Posted by April Wright
April Wright
8,338 Points

How to execute function with every click event (button click) with refreshing page

I've built an app that generates a random snack from an array on a button click. But I'm stuck on getting it to generate another random snack without refreshing the page. How can I get it to generate another snack by clicking the button again?

JS: var snackName = ["Ants on a log","Smoothie with banana and peanut butter!", "Carrots and hummus", "Protien Ball", "Apple", "Any peice of fruit", "Cheese and Olives" ]; var randomSnack = snackName[Math.floor(Math.random() * snackName.length)];

$(document).ready(function getSnack(){ $('#generateButton').on("click", function (){ $('#snackResult').html('<p>' + randomSnack +'</p>'); $('#generateButton').text('Regenerate ...'); }); });

HTML: <div> <button class="btn-lg" id="generateButton">Generate Snack Idea</button> </div> <div class="col"> <h3>Why Don't You Try: </h3> <div class="card" id="snackResult"> </div>

April Wright
April Wright
8,338 Points
April Wright
April Wright
8,338 Points

Should have said "withOUT refreshing page"

1 Answer

Sebastian H
Sebastian H
19,905 Points

Hey April, just for future reference it is much easier for people to respond to you if you format your question so your code is easily readable. Just put three backticks: ``` before and after each code code block and it will be formatted like in this response.

Anyway, you aren't getting a new snack each time you press the button because randomSnack is a variable rather than a function.

When your javascript file first runs a random snack is assigned to the randomSnack variable and is never again updated, you just access the same variable over and over again.

You did mostly everything else right, just try assigning a new value to randomSnack each time you press the button. Something like this:

JS

var snackName = ["Ants on a log","Smoothie with banana and peanut butter!", "Carrots and hummus", "Protien Ball", "Apple", "Any peice of fruit", "Cheese and Olives" ]; 

/* this function returns a random snack */
function getRandomSnack() {
   return snackName[Math.floor(Math.random() * snackName.length)];
}

$(document).ready(
  $('#generateButton').on("click", function (){ 
    var randomSnack = getRandomSnack();
    $('#snackResult').html('<p>' + randomSnack +'</p>');
    $('#generateButton').text('Regenerate ...'); 
  }); 

);
April Wright
April Wright
8,338 Points
April Wright
April Wright
8,338 Points

Thanks very much Sebastian!

I couldn't figure out how to post my code like you've just shown me so you've answered 2 questions for me.

Thanks for taking the time to help me out.

Sebastian H
Sebastian H
19,905 Points

No problem :) we've all been there. Good luck!