Random page URL selection button

[user972]

const allUrls = [
‘https://www.exampleurl1.com’,
‘https://www.exampleurl2.com’,
];

$w.onReady(function(){
const randomIndex = Math.floor(Math.random() * (allUrls.length - 1));
$w(‘#button1’).link = allUrls[randomIndex];
});

Hello, I’ve tried to place the above code into my site, but it only wants to repeatedly select one of the url’s even though I have multiple urls placed in the “const allUrls” section.

Any ideas on how to solve this issue and have the code “recognize/consider” all the listed urls?

Thanks

[CODE-NINJA]

https://russian-dima.wixsite.com/my-site-13/blank-2

Generated out of the following example with some edits…

Random Page URL button

Hi, I’ve been trying to create a button on my website that takes you to a random page out of an array of URLs. I don’t have a lot of programming knowledge but I’m motivated to pull this off. So I’ve found this piece of code on the forum. But it doesn’t seem to work for me. My button is also named button1 I’m saving the code in the page section of the coding area in the WIX editor. Is that right? Is the code not “connected” to the button yet? const allUrls = [ 'https://www.google. com', '…

Working code on the page…

const allUrls = [
 'https://www.google.com',
 'https://www.facebook.com',
 'https://www.cnn.com',
 'https://www.abc.com',
 'https://www.youtube.com'
];

$w.onReady(function(){
   	$w('#button1').onClick(()=>{
		const randomNumber = Math.floor(Math.random() * allUrls.length); 
		console.log('Random-Number: ', randomNumber+1)
		$w('#button2').label = String(allUrls[randomNumber]);
		$w('#button2').link = String(allUrls[randomNumber]);
	});

	$w('#button2').onClick(()=>{
		//.....what ever....
	});
});

All you need to recreate this function is a blank Wix-Page inside your Wix-Editor and 2 buttons on stage (button1 & button2) and of course the shown code.

GOOD LUCK & HAPPY CODING !

[user972]

Okay, that works but I actually want the button click action to page change/navigate to the randomly selected url, not just show one.

[user972]

…And only using one button to do this.

[CODE-NINJA]

const allUrls = [
 'https://www.google.com',
 'https://www.facebook.com',
 'https://www.cnn.com',
 'https://www.abc.com',
 'https://www.youtube.com'
];

$w.onReady(function(){
	randomizeURL(allUrls);
   	//$w('#button1').onClick(()=>{
	//
	//});
});


function randomizeURL(allUrls) {
	const randomNumber = Math.floor(Math.random() * allUrls.length); 
	console.log('Random-Number: ', randomNumber+1)
	$w('#button1').label = String(allUrls[randomNumber]);
	$w('#button1').link = String(allUrls[randomNumber]);
}

This way → each time you refresh your site → it will give you another random link of the button.

GOOD LUCK & HAPPY CODING !!!

[user972]

That’s very close to what I’m trying to do…but, is there a way to hide the randomly generated link so that I can overlay it on a custom graphic/image? And make the graphic/image “appear” to be the button.

And/or is there a way to have the randomization only occur once the button is clicked instead of upon refreshing the page?

Thanks

[CODE-NINJA]

…but, is there a way to hide the randomly generated link…

1. to hide the randomly generated link (label) →
   //$w('#button1').label = String(allUrls[randomNumber]);

2. Yes you can use an image instead of a button.

And/or is there a way to have the randomization only occur once the button is clicked instead of upon refreshing the page?

Now i am not sure what you are trying to achieve.

[user972]

Sweet this is working how I wanted it to, thank you…But right now the randomizing button is place over an image/icon I am using and I just made the button transparent so it looks like your clicking the image and not the button.

Do I have to do it this way or can I use an image in place of the button with some similar code? If this makes sense?

[user972]

Also, how do I have this open in the same window instead of in a new tab?

[CODE-NINJA]

Ok, describe me the whole setup!

1. I have an Image which i want to be clickable (understood).
   No need to overlay your images with buttons (no need to generate fake Icon-Buttons).
   There are 3 different ways of how to solve it.
   a) your way → i call it fake-way.
   b) wix provides you buttons with integrated icons (as of my knowledge) → but maybe still not a good solution.
   c) Simply turning an IMAGE → into a BUTTON by code (maybe the best solution and most flexible).

2. Once clicked onto my image —> …continue your detailed description…

??? —> i want to be navigated to a random generated site?
??? —> i want to show a random pic?
??? —> i do not want to open a new tab, instead i want to show in same window?
??? —> …and so on…

The more detailed you describe your issue/setup → the more accurate and precise will be the answer / result.

[user972]

((The overall goal is to have an icon/image on my site which someone can click on and it will take them to a random page within my sites url database))

So yes you basically have it right… If I can do it easily enough I would like to turn an image into a button so that I don’t have to do it the fake-way.

And yes, once clicked on my image "I do not want to open a new tab, instead I want to show the random page from my site in same window.

[user972]

I want to navigate to the random page from my site in same window.

[CODE-NINJA]

@CODE-NINJA

const allUrls = [
 'https://www.google.com',
 'https://www.facebook.com',
 'https://www.cnn.com',
 'https://www.abc.com',
 'https://www.youtube.com'
];

$w.onReady(function(){
	randomizeURL(allUrls);
   	//$w('#button1').onClick(()=>{
	//
	//});
});


function randomizeURL(allUrls) {
	const randomNumber = Math.floor(Math.random() * allUrls.length); 
	console.log('Random-Number: ', randomNumber+1)
	$w('#button1').label = String(allUrls[randomNumber]);
	$w('#button1').link = String(allUrls[randomNumber]);
}

Check the example → again…
https://russian-dima.wixsite.com/my-site-13/blank-2

CODE:

import wixLocationFrontend from 'wix-location-frontend';

const allUrls = [
 'https://www.google.com',
 'https://www.facebook.com',
 'https://www.cnn.com',
 'https://www.abc.com',
 'https://www.youtube.com'
];

$w.onReady(()=>{	
   	$w('#imgNinja').onClick(async(event)=>{
		let myRandomURL = await start_randomNavigation(allUrls);
		console.log(myRandomURL);
		wixLocationFrontend.to(myRandomURL);   
	});
});


function start_randomNavigation(allUrls) {
	const randomNumber = Math.floor(Math.random() * allUrls.length); 
	return allUrls[randomNumber]
}

Already totaly different to your initial one.

[user972]

Hmm, when I replace your new code for the old one and I change the image name to match my image own image tag there is nothing clickable, like it’s not recognizing the image as a button?!

[user972]

…But what you have on your example site is exactly what I am trying to accomplish just with my own site url’s instead of other site urls

[CODE-NINJA]

Yes, i already understood that. All you have to do → is to replace the example URL’s by your own → loaded from a database.

About the IMAGE…

Make sure that you have setted-up everything correctly

[user972]

Hey, WIX put me on a 15 hour timeout, but i’m back now…

So if you are still willing to help, here’s the current problem when I try to use the new code…

No page change when the button is clicked, but it looks like the button is working as it should be from what I can see in the developer console (when I click the image it shows one of my listed urls) But why won’t the button click change the page?

Thanks.

[CODE-NINJA]

Where is the code, you are using?
Show your current working (not working code).

How to find a problem inside a not existing code?

[user972]

const allUrls = [
'https://exampleurl1.com’,
'https://exampleurl2.com’
];

import wixLocationFrontend from ‘wix-location-frontend’;

$w.onReady(()=>{
$w(‘#imageX2’).onClick(async(event)=>{
let myRandomURL = await start_randomNavigation(allUrls);
console.log(myRandomURL);
wixLocationFrontend.to(myRandomURL);
});
});

function start_randomNavigation(allUrls) {
const randomNumber = Math.floor(Math.random() * allUrls.length);
return allUrls[randomNumber]
}

[CODE-NINJA]

Your code is working for me…

Tested in Editor-Preview, take a look onto console-logs…

Testing it inside the Wix-Editor won’t do the navigation to other sites.
If you want to see the navigation is working or not, you will have to test it on LIVE-SITE.

Just changed your pic against mine… and the URL-DATA…

import wixLocationFrontend from 'wix-location-frontend';

const allUrls = [
 'https://www.google.com',
 'https://www.facebook.com',
 'https://www.cnn.com',
 'https://www.abc.com',
 'https://www.youtube.com'
];

$w.onReady(()=>{
	$w('#imgNinja').onClick(async(event)=>{
		let myRandomURL = await start_randomNavigation(allUrls);
		console.log(myRandomURL);
		wixLocationFrontend.to(myRandomURL);
	});
});

function start_randomNavigation(allUrls) {
	const randomNumber = Math.floor(Math.random() * allUrls.length);
	return allUrls[randomNumber]
}