I am currently working on creating a function that checks when a user inputs a number between 0 and 8, triggering an action corresponding to that specific number. For example, if the user enters 5, a picture and text should appear; whereas if they input 3, a different picture and text should be displayed.
At this point, I have set up a form where users can enter a number, but I am struggling to figure out how to make these inputs activate the display of a picture and accompanying 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...
</div>
Therefore, my goal is to have this content displayed once a person types in the number "5".
Here is the form I have created:
<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>
Below is the script I have developed:
function displayPlanet(){
var data = getElementbyId("submit").innerHTML;
if(data == 5){
}
}
I understand how to create the function, however, my confusion lies in how to specifically make the div id Jupiter visible upon user input. That was my initial query, apologies for any misunderstanding.