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

Question

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?

Please add some more details, where are you stuck implementing that? — 0stone0, Dec 15 '21 at 17:11
I don't think `x.innerHTML == "Velg navn" || j` does what you think it does. You aren't comparing the content against two strings, you are comparing against one, and if it's not equal, `j`s value `"Jasmin"` is being evaluated as `true` (since it's a non empty string) — DBS, Dec 15 '21 at 17:12
Does this answer your question? [Check variable equality against a list of values](https://stackoverflow.com/questions/4728144/check-variable-equality-against-a-list-of-values) — Heretic Monkey, Dec 15 '21 at 17:14

score 1 · Accepted Answer · answered Dec 15 '21 at 17:14

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>

"using either `querySelector()` or `getElementsByClassName()`" Those functions return two very different results. Making them seem equivalent leads to duplicates of https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method — Heretic Monkey, Dec 15 '21 at 17:17

score 1 · Answer 2 · answered Dec 15 '21 at 17:15

You would add an id to your buttons, then update the style.

<button id='btn1' class="visknapp20()" style="display: none;">20 år</button>

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

It might be better to use the visibility style verses the display style.

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

2 Answers2