Random image from button code

estormstudio · May 2

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>

tuanphan · May 5

Change this line

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

to

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

estormstudio · May 6

@tuanphan - thank you so much for fixing! It works!

Random image from button code

Recommended Posts

estormstudio

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

tuanphan

Link to comment

estormstudio

Link to comment

Create an account or sign in to comment

News

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources