there several similar questions, hope unique problem. none of proposed solutions on similar questions have solved issue. humble apologies beginner if messed somehow.
i have empty div on page loading using javascript strings array. currently, have script running on button reloads entire page. button reload div items javascript array.
here code:
<html> <head> <link rel="stylesheet" href="obliquestyle.css"> <style></style> </head> <link href='http://fonts.googleapis.com/css?family=open+sans' rel='stylesheet' type='text/css'> <body> <div id="wrapper"> <div id="strategybox"></div> <div id="button"> <a class="againbutton" onclick="buttonreload()">again</a> <script> var buttonreload = function() { document.getelementbyid("strategybox").innerhtml = '<p id="strategytext">' + randomstrategy + '</p>'; } </script> </div> </div> <script src="os.js"></script> </body> here snippet of array , js (coming os.js file referenced in index.html) using load div initially/on refresh:
var obliquestrategy = ["abandon normal instruments", "accept advice", "accretion", "a line has 2 sides"]; var randomstrategy = obliquestrategy[math.floor(math.random() * obliquestrategy.length)]; document.getelementbyid("strategybox").innerhtml = '<p id="strategytext">' + randomstrategy + '</p>'; i've tried calling same javascript function in script in html this:
<div id="button"> <a class="againbutton" onclick="buttonreload()">again</a> <script> var buttonreload = function() { document.getelementbyid("strategybox").innerhtml = '<p id="strategytext">' + randomstrategy + '</p>'; } </script> </div> i've tried using jquery ajax load function this:
<script> $(function() { $("#againbutton").on("click", function() { $("#strategybox").load("index.html") return false; }) }) </script> i've played around variations of above , tried couple other things i'm forgetting how , did, can't include them. i've hit wall on though seems profoundly simple.
thanks in advance help.
here's 1 method: http://jsfiddle.net/kxqcws07/
html
<div id="wrapper"> <div id="strategybox"><p id="strategytext"></p></div> <div> <input type="button" class="againbutton" value="again"> </div> </div> javascript
//wrapping logic in namespace helps reduce chances of naming collisions of functions , variables between different imported js files var localnamespace = function() { //private array containing our strings randomly select var obliquestrategy = [ "abandon normal instruments" , "accept advice" , "accretion" , "a line has 2 sides" ]; var api = { //bindbuttonaction binds generaterandomstrategy function click event of againbutton bindbuttonaction: function() { $('#wrapper .againbutton').click(api.generaterandomstrategy); } , generaterandomstrategy: function() { //get position of 1 of string randomly //math.random() returns float value < 1 multiplying 100 gets range of (0.* - 99.*) //then math.floor() rid of float value , keep integer part //finally modulus length of string array //if unfamiliar modulus, gives remainder of division. instance 10 / 3 gives 3 remainder of 1, 10 % 3 1. //what keeps random offset of our within bounds of array length (0 length -1) var randomoffset = math.floor(math.random() * 100) % obliquestrategy.length; //finally once have offset, set html string @ position in array $('#wrapper #strategybox #strategytext').html( obliquestrategy[randomoffset] ); } }; return api; }(); $(document).ready(function() { //here call bind action button work, explicitly call generaterandomstrategy function page preload random string @ start localnamespace.bindbuttonaction(); localnamespace.generaterandomstrategy(); }); 