我只想一次改变“改变”答案

【问题标题】：I want to onchange "change" just one time我只想一次改变“改变”
【发布时间】：2020-12-27 23:26:14
【问题描述】：

所以：我一直在尝试只进行一次 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();

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

谢谢！

【问题讨论】：

请注意，SO 并不意味着“您能否为我提供此代码”存储库。它旨在为那些在解决特定挑战时遇到问题的人提供有用的资源？也许看看这个：stackoverflow.com/help/how-to-ask 尝试了什么，发生了什么错误，它们发生在代码中的什么位置等。您的特定问题必须包括一个专用变量，该变量确定购物车中是否有任何东西并显示按钮.

标签： javascript html css if-statement onchange

【解决方案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>

【讨论】：

【解决方案2】：

我一直在尝试只更改一次onchange

这就是.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);

【讨论】：

或将once 选项传递给addEventListener – .addEventListener('change', button, {once : true})
好点，@pilchard。在添加click 事件侦听器等时，我确实使用了false 和true，但是，虽然我前段时间了解了较新的对象参数的值，但我发现几年后我从未真正使用过它们。我去修改一下。