creating random button in Javascript from list of buttons

Question

I am trying this simple JavaScript project for my Bootcamp pre work and it suggested making a new button and I decided to try and make a random button out of the buttons I had already created so that when you clicked it, it would run one of the scripts for the buttons that I have already defined. I have been working on this for a few hours and I just can't seem to get it or find another example of what I'm trying to do. Any help would be much appreciated!!!

document.getElementById("button1").addEventListener("click", function () {

    document.getElementById("box").style.height = "300px"
    document.getElementById("box").style.width = "300px"

});
document.getElementById("button2").addEventListener("click", function () {

    document.getElementById("box").style.height = "50px"
    document.getElementById("box").style.width = "50px"

});

document.getElementById("button3").addEventListener("click", function () {

    document.getElementById("box").style.backgroundColor = "blue"

});

document.getElementById("button4").addEventListener("click", function () {

    document.getElementById("box").style.opacity = "0.2"

});



document.getElementById("button5").addEventListener("click", function () {

    document.getElementById("box").style = "height:150px; width:150px; background-color:orange; margin:25px"

});

let btnList = ["#button1", "#button2", "#button3", "#button4", "#button5"];

const randomBtn = document.getElementsByClassName('rand');


randomBtn.addEventListener("click", function () {
    Math.floor(Math.random() * randomBtn.length)
})

<html>

<head>
    <title>Jiggle Into JavaScript</title>
    <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> -->
</head>

<body onload="printBtn();">

    <p>Press the buttons to change the box!</p>

    <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>

    <button class="rand" id="button1">Grow</button>
    <button class="rand" id="button2">Shrink</button>
    <button class="rand" id="button3">Blue</button>
    <button class="rand" id="button4">Fade</button>
    <button class="rand" id="button5">Reset</button>
    <button class="rand">Random</button>


    <script type="text/javascript" src="javascript.js"></script>

</body>

</html>

Steven Simijaca · Accepted Answer · 2021-02-11 22:05:11Z

You can try create a object with actions to use, you can share de actions with the random buttom, something like this.

const buttonHandlers = {
  grow: function () {
    document.getElementById("box").style.height = "300px"
    document.getElementById("box").style.width = "300px"
  },
  shrink: function () {
    document.getElementById("box").style.height = "50px"
    document.getElementById("box").style.width = "50px"
  },
  blue: function () {
    document.getElementById("box").style.backgroundColor = "blue"
  },
  fade: function () {
    document.getElementById("box").style.opacity = "0.2"
  },
  reset: function () {
      document.getElementById("box").style = "height:150px; width:150px; background-color:orange; margin:25px"
  },
  random: function() {
    const btnList = ["grow", "shrink", "blue", "fade", "reset"];
    const randomAction = Math.floor(Math.random() * btnList.length);

    buttonHandlers[btnList[randomAction]]();

  }
}

document.getElementById("button1").addEventListener("click", buttonHandlers.grow);
document.getElementById("button2").addEventListener("click", buttonHandlers.shrink);
document.getElementById("button3").addEventListener("click", buttonHandlers.blue);
document.getElementById("button4").addEventListener("click", buttonHandlers.fade);
document.getElementById("button5").addEventListener("click", buttonHandlers.reset);
document.getElementById('random').addEventListener("click", buttonHandlers.random);

<html>

<head>
    <title>Jiggle Into JavaScript</title>
    <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> -->
</head>

<body onload="">

    <p>Press the buttons to change the box!</p>

    <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>

    <button class="rand" id="button1">Grow</button>
    <button class="rand" id="button2">Shrink</button>
    <button class="rand" id="button3">Blue</button>
    <button class="rand" id="button4">Fade</button>
    <button class="rand" id="button5">Reset</button>
    <button class="rand" id ="random" >Random</button>


    <script type="text/javascript" src="javascript.js"></script>

</body>

</html>

Greats.

thanatonian2311 · Accepted Answer · 2021-02-11 21:54:52Z

The problem lay in the fact that since you are getting randomBtn using getElementsByClassName it is in fact an array of elements instead of a single element. So it is invalid to call addEventListener on an array.

Instead, what you should do is consider the random button to be an individual button and use it to trigger the click event on other buttons. This will make sure your changes remain encapsulated within individual buttons. You also don't have to maintain a hardcoded list of button IDs since you are already following a pretty straightforward convention of sequential button numbers.

In the code below, I've connected the random button to the first 4 buttons (didn't think 'reset' would be fun in the random button).

document.getElementById("button1").addEventListener("click", function () {
    document.getElementById("box").style.height = "300px"
    document.getElementById("box").style.width = "300px"
});

document.getElementById("button2").addEventListener("click", function () {
    document.getElementById("box").style.height = "50px"
    document.getElementById("box").style.width = "50px"
});

document.getElementById("button3").addEventListener("click", function () {
    document.getElementById("box").style.backgroundColor = "blue"
});

document.getElementById("button4").addEventListener("click", function () {
    document.getElementById("box").style.opacity = "0.2"
});


document.getElementById("button5").addEventListener("click", function () {
    document.getElementById("box").style = "height:150px; width:150px; background-color:orange; margin:25px"
});

const randomButtons = document.getElementsByClassName("rand");

document.getElementById('rand').addEventListener("click", function () {
    let buttonNumber = Math.ceil(Math.random() * randomButtons.length);
    console.log(`Button number: ${buttonNumber}`);
    document.getElementById(`button${buttonNumber}`).click();
})

<html>

<head>
    <title>Jiggle Into JavaScript</title>
    <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> -->
</head>

<body onload="">

    <p>Press the buttons to change the box!</p>

    <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>

    <button class="rand" id="button1">Grow</button>
    <button class="rand" id="button2">Shrink</button>
    <button class="rand" id="button3">Blue</button>
    <button class="rand" id="button4">Fade</button>
    <button id="button5">Reset</button>
    <button id="rand">Random</button>


    <script type="text/javascript" src="javascript.js"></script>

</body>

</html>

DCR · Accepted Answer · 2021-02-11 22:17:15Z

document.getElementById("button1").addEventListener("click", function () {

    document.getElementById("box").style.height = "300px"
    document.getElementById("box").style.width = "300px"

});
document.getElementById("button2").addEventListener("click", function () {

    document.getElementById("box").style.height = "50px"
    document.getElementById("box").style.width = "50px"

});

document.getElementById("button3").addEventListener("click", function () {

    document.getElementById("box").style.backgroundColor = "blue"

});

document.getElementById("button4").addEventListener("click", function () {

    document.getElementById("box").style.opacity = "0.2"

});



document.getElementById("button5").addEventListener("click", function () {

    document.getElementById("box").style = "height:150px; width:150px; background-color:orange; margin:25px"

});

let btnList = ["#button1", "#button2", "#button3", "#button4", "#button5"];


const randomBtn = document.getElementsByClassName('rand')[5];

randomBtn.addEventListener("click", function(){
   
let idx = Math.floor(Math.random() * 5)

switch(idx) {
  case 0:
    document.getElementById("box").style.height = "300px"
    document.getElementById("box").style.width = "300px"
    break;
  case 1:
    document.getElementById("box").style.height = "50px"
    document.getElementById("box").style.width = "50px"
    break;
   case 2:
     document.getElementById("box").style.backgroundColor = "blue"
    break;
  case 3:
    document.getElementById("box").style.opacity = "0.2"
    break;
  case 4:
     document.getElementById("box").style = "height:150px; width:150px; background-color:orange; margin:25px"

    break;
  default:
    // code block
}




})

<html>

<head>
    <title>Jiggle Into JavaScript</title>
    <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> -->
</head>

<body >

    <p>Press the buttons to change the box!</p>

    <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>

    <button class="rand" id="button1">Grow</button>
    <button class="rand" id="button2">Shrink</button>
    <button class="rand" id="button3">Blue</button>
    <button class="rand" id="button4">Fade</button>
    <button class="rand" id="button5">Reset</button>
    <button class="rand">Random</button>


    <script type="text/javascript" src="javascript.js"></script>

</body>

</html>

Collectives™ on Stack Overflow

creating random button in Javascript from list of buttons

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related