dimanche 2 septembre 2018

To display specific output for an input (from HTML) using Javascript

I just started with JavaScript and want to build a HTML page which accepts the input and the JavaScript takes the input from HTML and searches the database array and displays the specific output for each input. Heres's the HTML :

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>My Webpage!</title>
  </head>
  <body>
    <br><br><br><br>
    <input type="text" name="inputField" id="answer" placeholder="Enter the answer..." required>
    <button type="button" name="button" onclick="mySubmit()">Submit</button>
    <p id="demo"></p>
    <link href'./script.js">

</body>
</html>

Here's the JavaScript :

var getInput = document.getElementById("answer").innertext;
    console.log(getInput);
    function mySubmit() {
      var text;
      var database = [
        {
          answer : "Apple",
          clue   : "Steve Jobs"
        },
        {
          answer : "Mango",
          clue   : "Fruit"
        }
      ];
      for(var i=0;i<database.length;i++){
        if(database[i].answer === getInput){
          text = database[i].clue;
          console.log(text);
        }
        else{
          text = "The answer is incorrect";
          console.log(text);
        }
        document.getElementById("demo").innertext = text;
      }

    }

The code should do as, if asks for user input e.g. Apple and give output on HTML as "Steve Jobs".




Aucun commentaire:

Enregistrer un commentaire