How to make the button more reactive

If I click the button too fast, then it doesn’t execute as if it didn’t register the click. Is there any way I can make this simple code react better? Or is this pretty much the extent of it? any advice would be helpful to help me in future mini-projects such as this.

// function named change_color which contains color array and random selection
function change_Color(){
    // creating color variable equal to the color array
    var color = ["blue", "red", "green", "yellow"];
    // created random variable targeting the color variable saying to choose
    // a random color from the array
    var random = color[Math.floor(Math.random()*color.length)];
    // targets the the div element with id wrapper, telling it to use the
    // random variable
    document.getElementById("wrapper").style.backgroundColor = random;
}
body {
    margin: 0;
}
* {
    box-sizing: border-box;
}

#wrapper {
    width: 100%;
    height: 100vh;
    background-color: skyblue;
    display: flex;
    justify-content: center;
    align-items: center;

    button {
        padding: 10px;
        background: orange;
        color: white;
        border: none;
        border-radius: 10px;
        font-size: 2rem;
        transition: .5s ease;

        &:hover {
            box-shadow: 0 4px 3px 0px rgba(255, 255, 255, 0.8);
            cursor: pointer;
        }
        &:focus {
            outline: 0;
            color: skyblue;
        }
    }
    

}
<body>
    <div id="wrapper">
        <button onclick="change_Color()">Click me!</button>
    </div>
    <script src="JS/style.js"></script>
</body>

Answer

You’re at the mercy of the hardware layer at this point, but you could move any code that doesn’t need to be in the function out of the function so there is less to process. Again though, you may not see any improvement because a click triggers operations that are outside of the JavaScript runtime’s boundaries and the browser’s code, which in turn invokes operating system code, runs next.

// The following two lines don't need to be invoked 
// over and over and could potentially speed things
// up by not being in the function.
var color = ["blue", "red", "green", "yellow"];
let wrapper = document.getElementById("wrapper");

// function named change_color which contains color array and random selection
function change_Color(){
    // There's no reason for a variable if you only use its value once:
    wrapper.style.backgroundColor = color[Math.floor(Math.random()*color.length)];
}
body {
    margin: 0;
}
* {
    box-sizing: border-box;
}

#wrapper {
    width: 100%;
    height: 100vh;
    background-color: skyblue;
    display: flex;
    justify-content: center;
    align-items: center;

    button {
        padding: 10px;
        background: orange;
        color: white;
        border: none;
        border-radius: 10px;
        font-size: 2rem;
        transition: .5s ease;

        &:hover {
            box-shadow: 0 4px 3px 0px rgba(255, 255, 255, 0.8);
            cursor: pointer;
        }
        &:focus {
            outline: 0;
            color: skyblue;
        }
    }
    

}
<body>
    <div id="wrapper">
        <button onclick="change_Color()">Click me!</button>
    </div>
    <script src="JS/style.js"></script>
</body>
Source: stackoverflow
The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .