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:

<html>
	<head>
		<title>Random Brand</title>
		<link rel="stylesheet" href="assets/stylesheets/app.css">
	</head>
	<body>
		<header class="flex">
			<h2>Random Brand</h2>
			<button>Generate Brand</button>
		</header>
		<section class="flex">
			<img src="">
		</section>
		<script src="assets/scripts/app.js"></script>
	</body>
</html>
<style>
  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;
}
  </style>

   <script>
const imageArray = [
  "https://images.unsplash.com/photo-1508185159346-bb1c5e93ebb4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=55cf14db6ed80a0410e229368963e9d8&auto=format&fit=crop&w=1900&q=80",
  "https://images.unsplash.com/photo-1495480393121-409eb65c7fbe?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=05ea43dbe96aba57d48b792c93752068&auto=format&fit=crop&w=1351&q=80",
  "https://images.unsplash.com/photo-1501611724492-c09bebdba1ac?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ebdb0480ffed49bd075fd85c54dd3317&auto=format&fit=crop&w=1491&q=80"
];

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]);
}
</script>
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.