How to show a button after one of the two buttons are clicked?

December 15, 2021

I want two buttons to appear right after one of the two buttons prior is pressed.

var a = "Jeg heter ";
var b = "Benjamin";
var j = "Jasmin";

function endre() {
  var x = document.getElementById("endre1");
  if (x.innerHTML == "Velg navn" || j) {
      x.innerHTML = a + b;
  }
}

function endre2() {
  var x = document.getElementById("endre1");
  if (x.innerHTML == "Velg navn" || b) {
      x.innerHTML = a + j;
   }
}

<button onclick="endre2()">Jasmin</button>
<button onclick="endre()">Benjamin</button>
<div id="endre1">Velg navn</div>
<br>
<button class="visknapp24()" style="display: none;">24 år</button>
<button class="visknapp20()" style="display: none;">20 år</button>

Any way to add to this?

>Solution :

Firstly you need the same function to show for both the buttons. Also, you have to just query the buttons using either querySelector() or getElementsByClassName().

Once you have that you can use style property from JS to modify CSS styles:

var a = "Jeg heter ";
    var b = "Benjamin";
    var j = "Jasmin";

    function endre() {
    var x = document.querySelector(".visknapp24");
    var y = document.querySelector(".visknapp20");
   x.style.display = 'block';
   y.style.display = 'block';
   
}

<button onclick="endre()">Jasmin</button>
<button onclick="endre()">Benjamin</button>
<div id="endre1">Velg navn</div>
<br>
<button class="visknapp24" style="display: none;">24 år</button>
<button class="visknapp20" style="display: none;">20 år</button>