Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Randomly generated number makes certain button highlighted

I’m building my first JS project and I want to generat a number from 1-100 and to add black border to one of 5 rectangles each representing a range of numbers (0-20, 20-40, etc). Unfortunately, the rectangles are highlighted randomly and don’t appear to be tied to the generated number

Here what I wrote. How do I make this work properly?

const makeNumber = () => {
  const randomValue = Math.trunc(Math.random() * 100 + 1);
  return randomValue;
};

test.addEventListener("click", function() {
  h1.innerText = makeNumber();
  statValue();
});

function remove() {
  stat.forEach((stat) => {
    stat.classList.remove("my-class");
    gif.style.visibility = "hidden";
  });
}

function statValue() {
  if (makeNumber() <= 20) {
    remove();
    normal.classList.add("my-class");
  } else if (makeNumber() > 20 && makeNumber() <= 40) {
    remove();
    stable.classList.add("my-class");
  } else if (makeNumber() > 40 && makeNumber() <= 60) {
    remove();
    warning.classList.add("my-class");
  } else if (makeNumber() > 60 && makeNumber() <= 80) {
    remove();
    overload.classList.add("my-class");
  } else if (makeNumber() > 80) {
    remove();
    critical.classList.add("my-class");
    gif.style.visibility = "visible";
  }
}
.my-class {
  border: 3px solid black;
}
<div class="container">
  <div class="meter">
    <div class="stat normal"></div>
    <div class="stat stable"></div>
    <div class="stat warning"></div>
    <div class="stat overload"></div>
    <div class="stat critical"></div>
    <img class="gif" src="img/Blinking_warning.gif" alt="">
  </div>

  <h1>0</h1>
  <button class="btn">test</button>

</div>
Tags:

4

Answers


  1. 0

    This might be an issue of the way you’re naming the classes in your HTML file. I’m not really understanding what you are asking here.

    Login or Signup to reply.
  2. 0

    Why are calling makeNumber() every time, everywhere? You need to save output of the makeNumber() in a variable and then run the loops against that variable. Because makeNumber()is being called in every if-else statement, it is generating new different random number and checking the new number against the condition. This is bound to give weird results.

    You have assigned the output of makeNumber() to h1.innerHtml(??), but you are running if-elses with the function itself.

    Login or Signup to reply.
  3. 0

    Try This

    document.addEventListener('DOMContentLoaded', function() {

  var random_number = 0;
  const test = document.getElementById("testBtn");
  const h1 = document.getElementById("testH1");
  const gif = document.getElementsByClassName("gif")[0];


  const makeNumber = () => {
    const randomValue = Math.trunc(Math.random() * 100 + 1);
    return randomValue;
  };


  test.addEventListener("click", function() {
    random_number = makeNumber();
    h1.innerText = random_number;
    statValue();
  });

  function remove() {
      document.querySelectorAll('.stat').forEach(function(e) {
      e.classList.remove("my-class");
      gif.style.visibility = "hidden";
  });
  }

  function statValue() {

    if (random_number <= 20) {
      remove();
      var normal = document.getElementsByClassName("normal")[0];
      normal.classList.add("my-class");
    } else if (random_number > 20 && random_number <= 40) {
      remove();
      var stable = document.getElementsByClassName("stable")[0];
      stable.classList.add("my-class");
    } else if (random_number > 40 && random_number <= 60) {
      remove();
      var warning = document.getElementsByClassName("warning")[0];
      warning.classList.add("my-class");
    } else if (random_number > 60 && random_number <= 80) {
      remove();
      var overload = document.getElementsByClassName("overload")[0];
      overload.classList.add("my-class");
    } else if (random_number > 80) {
      remove();
      var critical = document.getElementsByClassName("critical")[0];
      critical.classList.add("my-class");
      gif.style.visibility = "visible";
    }
  }
  }, false);
    .my-class {
  border: 3px solid black;
}
      <div class="container">
    <div class="meter">
      <div class="stat normal">Normal</div>
      <div class="stat stable">Stable</div>
      <div class="stat warning">Warning</div>
      <div class="stat overload">Overload</div>
      <div class="stat critical">Critical</div>
      <img class="gif" src="img/Blinking_warning.gif" alt="">
    </div>

    <h1 id="testH1">0</h1>
    <button class="btn" id="testBtn">test</button>

  </div>
    Login or Signup to reply.
  4. 0

    Instead of calling makeNumber() every time in statValue(), you can parse the created number from the click event. You can try this.

    const test = document.querySelector('.btn');
const h1 = document.querySelector('h1');
const stats = document.querySelectorAll('.stat');
const gif = document.querySelector('.gif');
const normal = document.querySelector('.normal');
const stable = document.querySelector('.stable');
const warning = document.querySelector('.warning');
const overload = document.querySelector('.overload');
const critical = document.querySelector('.critical');

const makeNumber = () => {
  const randomValue = Math.trunc(Math.random() * 100 + 1);
  return randomValue;
};

test.addEventListener("click", function() {
  const randomNumber = makeNumber();
  h1.innerText = randomNumber;
  statValue(randomNumber);
});

function remove() {
  stats.forEach((stat) => {
    stat.classList.remove("my-class");
    gif.style.visibility = "hidden";
  });
}

function statValue(randomNumber) {
  if (randomNumber <= 20) {
    remove();
    normal.classList.add("my-class");
  } else if (randomNumber > 20 && randomNumber <= 40) {
    remove();
    stable.classList.add("my-class");
  } else if (randomNumber > 40 && randomNumber <= 60) {
    remove();
    warning.classList.add("my-class");
  } else if (randomNumber > 60 && randomNumber <= 80) {
    remove();
    overload.classList.add("my-class");
  } else if (randomNumber > 80) {
    remove();
    critical.classList.add("my-class");
    gif.style.visibility = "visible";
  }
}
    .my-class {
  border: 3px solid black;
}
    <div class="container">
  <div class="meter">
    <div class="stat normal"></div>
    <div class="stat stable"></div>
    <div class="stat warning"></div>
    <div class="stat overload"></div>
    <div class="stat critical"></div>
    <!-- <img class="gif" src="img/Blinking_warning.gif" alt=""> -->
    <img class="gif" src="https://picsum.photos/200/300" alt="">
  </div>

  <h1>0</h1>
  <button class="btn">test</button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search