<div>
  <button id="manatees-button">Click for manatees!</button>

  <!--
    The importart part of this HTML is that the three manatee
    images are *inside* this div.water element.
    The data-manatees attribute controls how many manatees are
    shown, and we will set the value of this attribute when
    the button above is clicked with some JavaScript.
  -->
  <div id="manatees" class="water" data-manatees="0">
    <img src="https://assets.codepen.io/17949/manatee_swimming_sm_clr.gif" alt="a manatee" />
    <img src="https://assets.codepen.io/17949/manatee_swimming_sm_clr.gif" alt="a manatee" />
    <img src="https://assets.codepen.io/17949/manatee_swimming_sm_clr.gif" alt="a manatee" />
  </div>
  
  <output></output>
</div>
/**
 * Most of the CSS here is just to make this demo look decent.
 * The most important part is that the div.water that contains
 * the manatees has the data attribute, data-manatees.
 * This data attribute controls how many manatees are shown.
 * You can write your own CSS to position the manatees in the water
 * as you choose.
 */

/* Hide manatee images by default. */
.water img {
  opacity: 0;
}

/**
 * Control how many manatees are shown based on the
 * data-manatees attribute.
 */
[data-manatees="1"] img:nth-child(-n + 1),
[data-manatees="2"] img:nth-child(-n + 2),
[data-manatees="3"] img:nth-child(-n + 3){
  opacity: 1;
}














/**
 * The CSS below is PURELY to make this demo look decent.
 * You can omit it all if you choose.
 */

*, *::before, *::after {
  box-sizing: border-box;
}

@supports not (min-block-size: 100dvb) {
  :where(html) {
    block-size: 100%;
  }
}

:where(body) {
  min-block-size: 100vh;
  min-block-size: 100dvb;
  display: grid;
  place-items: center;
  margin: 0;
}

body > div > * + * {
  margin-block-start: 1em;
}

button {
  font-size: 20px;
}

.water {
  background-color: aquamarine;
  inline-size: 294px;
  display: flex;
  align-items: flex-start;
}

output {
  font-family: monospace;
}
// Get an integer between 1 and the max.
// 
// This is slightly different from the function you had
// before which actually generates random numbers between
// 0 and the max.
// 
// This means that when you set a max of 100, there are
// actually 101 possible numbers that can be generated.
//
// Instead, this function generates numbers between 1 and
// the max, so when the max is 100, there are 100 possible
// numbers that can be generated.
//
// This makes it easier to say that 3 manatees should appear
// 1% of the time.
function getRandomInt(max) {
  return Math.floor(Math.random() * (max - 1)) + 1
}

// Grab the button.
const button = document.getElementById("manatees-button")

// Grab the water the manatees are in.
const water = document.getElementById("manatees")

// Grab the <output> element. This is purely to show what
// random integer was generated.
const output = document.querySelector("output")

// Set up some variables that control when to show 1, 2, or 3 manatees.
//
// These variables assume that you're generating a random integer
// with a max of 100.
//
// This makes it easier to understand how often the number of manatees
// will show because we're working with percentages.
// i.e. three manatees are shown 1% of the time
//      two manatees are shown 33% of the time
const showThreeManatees = 1
const showTwoManatees = 33

// Attach a click handler to the button.
// When the button is clicked, we'll generate a new random
// number to show the appropriate number of manatees.
button.addEventListener("click", () => {
  let manateesCheck = getRandomInt(100)

  if (manateesCheck <= showThreeManatees) {
    // Set the data attribute on the water to 3
    water.dataset.manatees = 3
  } else if (manateesCheck <= showTwoManatees) {
    // Set the data attribute on the water to 2
    water.dataset.manatees = 2
  } else {
    // Set the data attribute on the water to 1
    water.dataset.manatees = 1
  }
  
  // This part is just to visualise what random integer
  // was generated and how many manatees to show as a
  // result.
  output.innerHTML = `generated ${manateesCheck} → ${manateesCheck <= showThreeManatees ? 3 : manateesCheck <= showTwoManatees ? 2 : 1} manatees`
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.