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

Javascript – Run Function on ever click

I have a javascript file that I want to run everytime a button is clicked in my HTML, at the moment this is refreshing the page but want it to run the javascript file below;

HTML

<h1>Refresh Me</h1>
      <div><button onclick="window.location.reload()" type="button" class="button">Let's Find Out</button></div>

javascript

var randomNumber1 = Math.floor(Math.random()*6)+1;
var randomDiceImage = "dice"+randomNumber1+".png";
var randomImageSource = "images/"+randomDiceImage;
var image1 = document.querySelectorAll('img')[0].setAttribute("src",randomImageSource);

var randomNumber2 = Math.floor(Math.random()*6)+1;
var randomDiceImage2 = "dice"+randomNumber2+".png";
var randomImageSource2 = "images/"+randomDiceImage2;
var image2 = document.querySelectorAll("img")[1].setAttribute("src",randomImageSource2);

    

if(randomNumber1 > randomNumber2){
document.querySelector("h1").innerText = "Kirsty Makes Tea";
}
else if(randomNumber1 < randomNumber2){
document.querySelector("h1").innerText= "Danny Makes Tea";
}else{
    document.querySelector("h1").innerText= "Its a draw";
}

Tried On Click and element listener but possibly incorrectly

Tags:

2

Answers


  1. 0

    use a click event listener on the whole window :

    const
  [diceK, diceD] = [...document.querySelectorAll('.dice > span')]
, sentence       = document.querySelector('p')
, diceFace       = ['&#9856;','&#9857;','&#9858;','&#9859;','&#9860;','&#9861;']
, randomDice  =()=> Math.floor(Math.random()*6)
  ;
window.addEventListener('click', () =>  
  {
  let R1 = randomDice(), R2 = randomDice();
  diceK.innerHTML = diceFace[R1];
  diceD.innerHTML = diceFace[R2];
  
  if      (R1 < R2) sentence.textContent = 'Kirsty Makes Tea';
  else if (R1 > R2) sentence.textContent = 'Danny Makes Tea';
  else              sentence.textContent = 'Its a draw';
  });
    html {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 16px;
  }
.dice {
  display     : inline-block;
  text-align  : center;
  padding     : 0;
  margin      : 0 0 0 1rem;
  caret-color : transparent;
  cursor      : default;
  }
.dice span {
  display     : inline-block;
  font-size   : 10rem;
  line-height : 8rem;
  height      : 8rem;
  background  : lightgreen;
  }
    <div class="dice"> Kirsty<br><span>&#9856;</span></div>   
<div class="dice"> Danny <br><span>&#9861;</span></div>   
<p> click anywhere...</p>
    Login or Signup to reply.
  2. 0

    You could do this by adding all the javascript into a single function.

    javascript

    function randomDice() {
  var randomNumber1 = Math.floor(Math.random()*6)+1;
        var randomDiceImage = "dice"+randomNumber1+".png";
        var randomImageSource = "images/"+randomDiceImage;
        var image1 = document.querySelectorAll('img')[0].setAttribute("src",randomImageSource);
        
        var randomNumber2 = Math.floor(Math.random()*6)+1;
        var randomDiceImage2 = "dice"+randomNumber2+".png";
        var randomImageSource2 = "images/"+randomDiceImage2;
        var image2 = document.querySelectorAll("img")[1].setAttribute("src",randomImageSource2);
             
        
        if(randomNumber1 > randomNumber2){
        document.querySelector("h1").innerText = "Kirsty Makes Tea";
        }
        else if(randomNumber1 < randomNumber2){
        document.querySelector("h1").innerText= "Danny Makes Tea";
        }else{
            document.querySelector("h1").innerText= "Its a draw";
        }
}

    And then use this function in your html:

    <h1>Refresh Me</h1>
  <div>
     <button onclick="randomDice()" type="button" class="button">Let's Find Out</button>
  </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search