我只想更改 "change" 一次

Question

所以：我一直试图只进行一次 onchange 更改，因为我希望对象在第一次更改后出现在屏幕上，并留在屏幕上：

<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>

并使用此 javascript 函数在页面上显示 div

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

我不知道该怎么做才能得到我想要的。请帮帮我？

谢谢！

Answer 1

如果我没理解错的话，您想在选择第一个项目后显示按钮，然后保持可见。如果这是正确的，请参阅下面使用您的代码的示例。您不需要代码中的 else 部分，我将 display: none 添加到 #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>

Answer 2

I've been trying to make an onchange change just one time

这就是 .removeEventListener() 的用途。

您可以在 <script> 中使用 .addEventListener() 而不是 onchange="button();" 作为内联属性，如下所示：

// GRAB ELEMENT
const selectTamanho = document.querySelector('[name="Tamanho"]');

// ADD THE EVENT LISTENER TO ELEMENT
selectTamanho.addEventListener('change', button);

然后，在 button() 函数中，您可以添加最后一行：

// REMOVE THE EVENT LISTENER FROM ELEMENT
selectTamanho.removeEventListener('change', button);

我只想更改 "change" 一次

I want to onchange "change" just one time

html

javascript

css

if-statement

onchange