Jump to content

Random image from button code

Go to solution Solved by tuanphan,

Recommended Posts

Hi - does anyone know how to get the images to not appear in the logo from this code? Thank you

URL: https://blenny-buttercup-pfwr.squarespace.com/
PW: hello

Original code source: https://codepen.io/jsd041313/pen/RQEOWm

Code block code:

		<title>Random Brand</title>
		<link rel="stylesheet" href="assets/stylesheets/app.css">
		<header class="flex">
			<h2>Random Brand</h2>
			<button>Generate Brand</button>
		<section class="flex">
			<img src="">
		<script src="assets/scripts/app.js"></script>
  html, body {
	margin: 0;
	height: 100%;
	width: 100%;

header {
	width: 100%;
	padding-bottom: 25px;
	flex-direction: column;

img {
	width: 100%;

.flex {
	display: flex;
	justify-content: center;
	align-items: center;

button {
    background: black;
    color: red;
  font-size: h4;

const imageArray = [

const image = document.querySelector("img");
const button = document.querySelector("button");

window.onload = () => generateBrand(imageArray);

button.addEventListener("click", () => generateBrand(imageArray));

function generateBrand(array) {
  let randomNum = Math.floor(Math.random() * array.length);
  image.setAttribute("src", array[randomNum]);
Link to comment
  • Replies 2
  • Views 376
  • Created
  • Last Reply

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.