Question

我有一个div元素，但在CSS中没有显示。我无法确定的是当有人在文本字段中输入特定数字时如何显示它。

下面是我尝试做的不同方式。

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语句，因为他们选择的每个数字都将等于一个不同的元素。

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

Answer 2

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

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

Answer 3

代码的更改部分用CAPITAL注释。

请找到以下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";
        }
    }

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

Answer 4

忘记关闭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>

如何使用JavaScript显示元素？

4 个答案: