How would one make a function in javascript so when the button is clicked, another button appears?-CodePudding

I am trying to make something a puzzle for a school project and for one of the puzzles, it requires me to make almost like an among-us fixing wire game. The most simple way to do that and do to get to get the best result is to use buttons. But how would I make it so when my first button is clicked, the second one appears?

I've tried using inputs, and the text appear.

CodePudding user response：

You could use the following css for the hidden buttons:

#hidden_button{
   display: none;
}

Then in javascript set up a listener for when you button is clicked:

button.addEventListener("click",show_second_button);

The function "show_second_button" will edit the css to show the hidden button:

var show_second_button = function(){
     document.getElementById("hidden_button").style.display = "block";
}

Setting the display style from "none" to "block" will cause the hidden button to appear.

CodePudding user response：

The best solution is to use an onclick on the first button.

An quick example :

<button id="firstButton" onclick='document.getElementById("hideMe").style.display = "block"'>Click me</button>
<button id="hideMe">I'm visible !</button>

This would work if you want one button to show an other but for multiple uses I recommand to use functions. And if you want more interaction the best way is to call function in your onclick.

function showBtn(buttonName){
    //Button Name is the Id of your button
    document.getElementById("buttonName").style.display = "block";
}