如何使特定输入触发某些内容?

时间:2019-06-26 23:11:17

标签: javascript html css

im试图创建一个函数来检查一个人何时输入0到8之间的数字,然后发生与该数字相对应的事情。例如,用户输入5,这样就可以显示图片和文字,如果用户输入3,则可以显示其他图片和文字,等等。

到目前为止,我有一个论坛,该人员可以输入数字,但是我一直试图弄清楚如何使这些输入触发显示图片和文字的动作。

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

所以我希望它在一个人输入数字“ 5”后显示出来

这是我的论坛

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

这是脚本

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

        }
    }

我了解如何获得困惑的功能,如何精确显示div id Jupiter。那是我最初的问题,对不起您的误会。

2 个答案:

答案 0 :(得分:0)

您可以在输入框中收听keyup event

function onKeyUp(e) {
  if (parseInt(e.value) == 5) {
  	// do something here
  }
}
<input type="text" onkeyup="onKeyUp(this)">

答案 1 :(得分:0)

您需要使用DOM

const request = require('request')
const url = 'https://api.darksky.net/forecast/5a6c29e0d9c879cef11d4d5de29d7d78/37.8267,-122.4233'
request({ url: url }, (error, response) => {
    if (error) {
        console.log(error)
    }
    console.log(response.body)
})
function action() {
  var data = document.getElementById("result").innerHTML; //Get the data
  if (data == 1) {
    alert("1");
  }

}