如何使用 javascript 显示元素？ [复制]答案

【问题标题】：How do i display an element using javascript? [duplicate]如何使用 javascript 显示元素？ [复制]
【发布时间】：2019-11-11 14:51:33
【问题描述】：

我有一个 div 元素，我在 css 中显示为 none。我无法弄清楚当有人在文本字段中输入某个数字时如何显示它。

以下是我尝试过的不同方法。

function planet() {
        var numb = document.getElementbyId("inputNumber").value;
        var displayP = document.getElementById("jupiter").style.display = "flex";
        if (numb == 5) {
            displayP;
        }

    }

function planet() {
        var numb = document.getElementbyId("inputNumber").value;
        if (numb == 5) {
            document.getElementById("jupiter").style.display = "flex";
        }

    }

这是我的论坛，我希望用户选择 0 到 9 之间的数字

<form action="" method="post" id="number">
            <fieldset>
                <legend>Enter a Number between 0 and 9</legend>
                <p>Number: <input type="text" id="inputNumber" placeholder="Number" required></p>
                <p><input type="submit" value="Enter" id="submit" onclick="planet()"/></p>
            </fieldset>

我知道如何在没有 if 语句的情况下显示元素，但我需要 if 语句，因为他们选择的每个数字都将等于不同的元素。

【问题讨论】：

不要在提交按钮上使用 onclick 事件，在表单上使用 onsubmit 事件。我相信这是验证表单的惯用方式。
好吧，我使用了 onsubmit，但不管怎样都不起作用

标签： javascript html css

【解决方案1】：

在 HTML 中为每个行星添加一个 ID，以 0 到 9 的数字结尾。然后，在 JavaScript 中，动态“组合”每个行星的（<li> 元素）id，并使用它一次显示一个行星：

function planet(e) {
  var numb = document.getElementById("inputNumber").value;
  var planetId = "planet_" + numb;
  console.log(planetId);
  document.getElementById(planetId).style.display = "flex";
}

#planetList li {
  display: none;
}

<form action="#" method="post" id="number" onsubmit="event.preventDefault()">
  <fieldset>
    <legend>Enter a Number between 0 and 9</legend>
    <p>Number: <input type="text" id="inputNumber" placeholder="Number" required></p>
    <p><input type="submit" value="Enter" id="submit" onclick="planet()" /></p>
  </fieldset>
</form>


<ul id="planetList">
  <li id="planet_0">A</li>
  <li id="planet_1">B</li>
  <li id="planet_2">C</li>
  <li id="planet_3">D</li>
  <li id="planet_4">E</li>
  <li id="planet_5">F</li>
  <li id="planet_6">G</li>
  <li id="planet_7">H</li>
  <li id="planet_8">I</li>
</ul>

【讨论】：

【解决方案2】：

忘记关闭form 标签。
拼错了单词getElementById（B必须大写）
甚至忘了提及ID为jupiter的元素
对于不等于 5 的数字，#jupiter 应该被隐藏这就是为什么我将else 添加到您的if
我还更改了按钮并添加了type="button"，以阻止表单刷新。

function planet() {
  var numb = document.getElementById("inputNumber").value;
  if (numb == 5) {
    document.getElementById("jupiter").style.display = "flex";
  }else{
    document.getElementById("jupiter").style.display = "none";
  }
}

#jupiter{
  display:none;
}

<form action="" method="post" id="number">
  <fieldset>
    <div id="jupiter">jupiter</div>
    <legend>Enter a Number between 0 and 9</legend>
    <p>Number: <input type="Number" id="inputNumber" placeholder="Number" required>
    </p>
    <button id="submit" type="button" onclick="planet()">Enter</button>
  </fieldset>
</form>

【讨论】：

【解决方案3】：

您的事件处理代码由表单中提交按钮的onClick 方法触发。单击该按钮时，将提交表单。由于表单标签的 action 属性中没有值，因此使用当前页面。当您单击该按钮时您正在重新加载页面并且从未看到 javascript 运行。

如果您使用 onSubmit 事件处理程序，您可以在 planet(event) 函数中接受 event 参数并在该函数中调用 event.preventDefault(); 或 return false; 以阻止表单提交。

【讨论】：

【解决方案4】：

代码的更改部分用大写注释。

请找到 HTML 为：

<form action="" method="post" id="number">
            <fieldset>
                <legend>Enter a Number between 0 and 9</legend>
                <p>Number: <input type="text" id="inputNumber" placeholder="Number" required></p>
<!-- INPUT TYPE IS CHANGED FROM "submit" TO "button"  -->                
<p><input type="button" value="Enter" id="submit" onclick="planet()"/></p>
            </fieldset>

请找到 Javascript 为：

function planet() {
  // REPLACE document.getElementbyId TO document.getElementById
  var numb = document.getElementById("inputNumber").value;

  if (numb == 5) {
            document.getElementById("jupiter").style.display = "flex";
        }
    }

如果您在实施此解决方案时遇到任何问题，请发表评论。

【讨论】：