[RESOLVED] Make my button Clickable more than once without Refresh

@jragan1122Nov 07.2014

My JavaScript code inside of my HTML file shuffles an array and
displays a random String from the list of items in my array at the
click of a button that I have created in the body of the HTML file.

For some reason, this only works once. I want to be able to click the button any amount of times to change the displayed String to another random item in my shuffled array.(All of the items in my array are Strings).

What parts of my code do you need to see to help you help me?

Thanks, Joshua Ragan

to post a comment

JavaScript

8 Comments(s) _↴

@nap0leonNov 07.2014 — #We need to see the relevant code...

Do you have a sample HTML page that shows the array (3 items would work), the function that picks one of the array elements to write to the screen, and the button you are using to call the function?

@giraffedevNov 07.2014 — #Would be awesome if you'd show us a preview of the code.

@jragan1122authorNov 07.2014 — #I just tried to post it, but it didn't work?
<html>

<head>

<script>

function shuffle(itemlist)

{

var m = itemlist.length, t, i;

while (m > 0)

{

i = Math.floor(Math.random() * m--);

t = itemlist[m];

itemlist[m] = itemlist[i];

itemlist[i] = t;

}

return itemlist

}

var keywords = [];

keywords[0] ="Hello World";

keywords[1] = "Sunset Magenta";

keywords[2] = "Google Glass";

keywords[3] = "Pink Floyd";

keywords[4] = "Running";

keywords[5] = "Comedy Special";

keywords[6] = "Home Coming";

keywords[7] = "8675309";

keywords[8] = "Hangover";

keywords[9] = "What?";

shuffle(keywords)

var i = 0;

function load_container(v)

{

document.getElementById(v).innerHTML=keywords[i];

}

</script>

</head>

<body>

<button type="button" onclick="load_container(but1.id)">RANDOM</button>

<div id="but1"></div>

</body>

</html>[/QUOTE]

@jragan1122authorNov 07.2014 — #

[code=html]<html>
 <head>
 <script>
 function shuffle(itemlist)
 {
 var m = itemlist.length, t, i;
 while (m > 0)
 {
 i = Math.floor(Math.random() * m--);
 t = itemlist[m];
 itemlist[m] = itemlist[i];
 itemlist[i] = t;
 }
 return itemlist
 }
 var keywords = [];
 keywords[0] ="Hello World";
 keywords[1] = "Sunset Magenta";
 keywords[2] = "Google Glass";
 keywords[3] = "Pink Floyd";
 keywords[4] = "Running";
 keywords[5] = "Comedy Special";
 keywords[6] = "Home Coming";
 keywords[7] = "8675309";
 keywords[8] = "Hangover";
 keywords[9] = "What?";
 shuffle(keywords)
 var i = 0;
 function load_container(v)
 {
 document.getElementById(v).innerHTML=keywords[i];
 }
 </script>
 </head>
 <body>
 <button type="button" onclick="load_container(but1.id)">RANDOM</button>
 <div id="but1"></div>
 </body>
 </html>[/code]

@JMRKERNov 08.2014 — #Not sure why you need to shuffle the array when the random function can be called for every display.

Your real problem is with the global variable 'i'. You never change it so the display is always the same.

Here is one solution. There is a possibility of immediate repeats, but that would happen anyway

after going through the list one time followed by another pass.

<i>
 </i>&lt;html&gt;
 &lt;head&gt; &lt;/head&gt;
 &lt;body&gt;
 &lt;button type="button" onclick="load_container('but1')"&gt;RANDOM&lt;/button&gt;
 &lt;div id="but1"&gt;&lt;/div&gt;
 
 &lt;script&gt;
 
 var keywords = [
 "Hello World",
 "Sunset Magenta",
 "Google Glass",
 "Pink Floyd",
 "Running",
 "Comedy Special",
 "Home Coming",
 "8675309",
 "Hangover",
 "What?",
 ];
 
 function load_container(v) {
 var i = Math.floor(Math.random()*keywords.length);
 document.getElementById(v).innerHTML=keywords[i];
 }
 &lt;/script&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

@jragan1122authorNov 10.2014 — #The shuffle is referenced for other purposes as well as the example you see here.

I just put all the code in one place so you didn't have to scan my entire document.

Is there a reason you put the script after the button?

@JMRKERNov 10.2014 — #The shuffle is referenced for other purposes as well as the example you see here.

I just put all the code in one place so you didn't have to scan my entire document.

Is there a reason you put the script after the button?[/QUOTE]

You will run into fewer problems and conflicts in your scripts if the HTML elements are defined

before they are referenced by the javascript. It is a more modern practice than earlier in the JS saga.

@jragan1122authorNov 10.2014 — #Below is the code I decided to go with:

[code=html]<html>
 <head>
 <script>
 function shuffle(itemlist)
 {
 var m = itemlist.length, t, i;
 while (m > 0)
 {
 i = Math.floor(Math.random() * m--);
 t = itemlist[m];
 itemlist[m] = itemlist[i];
 itemlist[i] = t;
 }
 return itemlist
 }
 var keywords = [];
 keywords[0] ="Hello World";
 keywords[1] = "Sunset Magenta";
 keywords[2] = "Google Glass";
 keywords[3] = "Pink Floyd";
 keywords[4] = "Running";
 keywords[5] = "Comedy Special";
 keywords[6] = "Home Coming";
 keywords[7] = "8675309";
 keywords[8] = "Hangover";
 keywords[9] = "What?";
 shuffle(keywords)
 function load_container(v)
 {
 var i = Math.floor(Math.random() *keywords.length);
 document.getElementById(v).innerHTML=keywords[i];
 }
 </script>
 </head>
 <body>
 <button type="button" onclick="load_container(but1.id)">RANDOM</button>
 <div id="but1"></div>
 </body>
 </html>[/code]

Thank you so much for the help!

To be honest I didn't expect this to actually turn out ok.

Your the best!

Also in #JavaScript _↴

array input value how to replace decode value as Output using JavaScript code Displaying names and numbers newbie Create/Destroy Elements

Success!

Help @jragan1122 spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] Make my button Clickable more than once without Refresh

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

[RESOLVED] Make my button Clickable more than once without Refresh

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #JavaScript _↴