如何使特定的输入触发某些东西？

Question

im trying to make a function that checks when a person inputs a number from 0 and 8 and then something happens that corresponds to that number. For example, the user inputs 5 and this makes it so a picture and text appear and if the person inputs 3 a different picture and text appear and etc.

So far i have a forum where the person can enter a number but im stuck trying to figure out how to make these inputs trigger the action of show a picture and the text.

<div id="Jupiter">
                <div class="pictures" >
                    <img src="img/Jupiter.gif">
                </div>
                    <h1 class="title">Jupiter</h1>
                    <div class="paragraphs"><p> Jupiter is the fifth planet from the Sun and the largest in the Solar System. It is a giant planet with a mass one-thousandth that of the Sun, but two-and-a-half times that of all the other planets in the Solar System combined. Jupiter and Saturn are gas giants; the other two giant planets, Uranus and Neptune, are ice giants. Jupiter has been known to astronomers since antiquity.[17] It is named after the Roman god Jupiter.[18] When viewed from Earth, Jupiter can reach an apparent magnitude of −2.94, bright enough for its reflected light to cast shadows,[19] and making it on average the third-brightest natural object in the night sky after the Moon and Venus. <br><br>Jupiter is primarily composed of hydrogen with a quarter of its mass being helium, though helium comprises only about a tenth of the number of molecules. It may also have a rocky core of heavier elements,[20] but like the other giant planets, Jupiter lacks a well-defined solid surface. Because of its rapid rotation, the planet's shape is that of an oblate spheroid (it has a slight but noticeable bulge around the equator). The outer atmosphere is visibly segregated into several bands at different latitudes, resulting in turbulence and storms along their interacting boundaries. A prominent result is the Great Red Spot, a giant storm that is known to have existed since at least the 17th century when it was first seen by telescope. Surrounding Jupiter is a faint planetary ring system and a powerful magnetosphere. Jupiter has 79 known moons,[21] including the four large Galilean moons discovered by Galileo Galilei in 1610. Ganymede, the largest of these, has a diameter greater than that of the planet Mercury.<br><br>Jupiter has been explored on several occasions by robotic spacecraft, most notably during the early Pioneer and Voyager flyby missions and later by the Galileo orbiter. In late February 2007, Jupiter was visited by the New Horizons probe, which used Jupiter's gravity to increase its speed and bend its trajectory en route to Pluto. The latest probe to visit the planet is Juno, which entered into orbit around Jupiter on July 4, 2016.[22][23] Future targets for exploration in the Jupiter system include the probable ice-covered liquid ocean of its moon Europa.</p>
                </div>
        </div>

So I want it to display this once a person types in the number "5"

Here's my forum

<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" /></p>
        </fieldset>

Here's the script

function displayPlanet(){
        var data = getElementbyId("submit").innerHTML;
        if(data == 5){

        }
    }

I understood how to get the function where I'm confused is how exactly do i make the div id Jupiter display. That was my original question, sorry for the misunderstanding.

Answer 1

You can listen to the keyup event from input box.

 function onKeyUp(e) { if (parseInt(e.value) == 5) { // do something here } }

 <input type="text" onkeyup="onKeyUp(this)">

Answer 2

You need to use DOM

 function action() { var data = document.getElementById("result").innerHTML; //Get the data if (data == 1) { alert("1"); } }

 <input id="result" type="text" onkeyup="action()">