How do i display an element using javascript?

Question

I have a div element that i have displayed as none in css. What I cant figure out is how to display it when someone inputs a certain number in a textfield.

Below is different ways i tried doing it.

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";
        }

    }

Here is my forum where i want the user to select a number between 0 and 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>

I know how to display the element without the if statement but i need the if statement because each number that they choose is going to equal a different element.

don't use an onclick event on the submit button, use an onsubmit event on the form. that's the idiomatic way of validating forms i believe. — Paul Nikonowicz, Jun 30 '19 at 19:15

Razvan Zamfir · Answer 1 · 2019-06-30T20:56:02.270

Add an Id to each planet in the HTML, ending in a number from 0 to 9. Then, in JavaScript, "compose" each planet's (<li> element) id dynamically and use it to display one planet at a time:

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>

score 0 · Answer 2 · answered Jun 30 '19 at 19:42

Your event handling code is triggered by the onClick method of the submit button in a form. When that button is clicked, the form is being submitted. Since you don't have a value in the action attribute of the form tag, the current page is used. You are reloading the page when you click that button and never seeing the javascript run.

If you use the onSubmit event handler, you can accept an event argument in your planet(event) function and call event.preventDefault(); or return false; in that function to prevent the form from submitting.

score 0 · Answer 3 · answered Jun 30 '19 at 19:57

Changed part of the code is commented with CAPITAL.

Please find the HTML as:

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

And Please find the Javascript as:

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

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

Please comment if you face any problem in implementing this solution.

Sima Amini · Accepted Answer · 2019-06-30T20:08:53.043

forgot to close the form tag.
misspelled the word getElementById (B must be capitalized)
forgot to even mention element with id called jupiter
for the numbers which are not equal to 5, #jupiter should be hidden that's why I add else to your if
I also changed the button and added type="button" in order to stop the form from refreshing.

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>

How do i display an element using javascript?

4 Answers4