I want to onchange “change” just one time

so: I’ve been trying to make an onchange change just one time, because i want the object appear on the screen after the first change, and stay on the screen:

<select required name="Tamanho" style="margin-top: 10px;margin-bottom: 10px;font-family: bebas_kairegular;font-size: 26px;" onchange="button();">
    <option value="tamanho" selected disabled id="tamanho">Escolha um tamanho</option>
    <option value="P">P</option>
    <option value="M">M</option>
    <option value="G">G</option>
</select>

<div id="button" ><button type="button" onclick="cartClick()" style="font-size: 26px;">Comprar</button></div>

and used this javascript function to appear the div on the page

  function button() {
  var p = document.getElementById("button");
  if (p.style.display === "none") {
    p.style.display = "block";
  } else {
    p.style.display = "none
  }
 }
button();

I don’t know what to do to have what i want. Help me please?

Thank You!

Answer

If I understood it correct, you want to show the button after the first item selected and then stay visible. If that is correct, please see below the example using your code. You do not need the else section in the code, and I added display: none to #button.

function button() {
  var p = document.getElementById("button");
  if (p.style.display === "none") {
    p.style.display = "block";
  }
 }

<select required name="Tamanho" style="margin-top: 10px;margin-bottom: 10px;font-family: bebas_kairegular;font-size: 26px;" onchange="button();">
    <option value="tamanho" selected disabled id="tamanho">Escolha um tamanho</option>
    <option value="P">P</option>
    <option value="M">M</option>
    <option value="G">G</option>
</select>

<div id="button" style="display:none"><button type="button" onclick="cartClick()" style="font-size: 26px;">Comprar</button></div>