Для отображения конкретного вывода для ввода (из HTML), используя Javascript - PullRequest
Новая
       24

Для отображения конкретного вывода для ввода (из HTML), используя Javascript

0 голосов
/ 02 сентября 2018

Я только начал с JavaScript и хочу создать HTML-страницу, которая принимает входные данные, а JavaScript принимает входные данные из HTML, выполняет поиск в массиве базы данных и отображает конкретные выходные данные для каждого ввода. Вот 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>

Вот код 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;
    }
}

Код должен поступать так, как будто запрашивает ввод пользователя, например, Apple и дать вывод на HTML как «Стив Джобс».

Ответы [ 3 ]

0 голосов
/ 02 сентября 2018

В вашем коде есть ошибки, позвольте мне попытаться объяснить, что вы должны использовать вместо:

  • Чтобы получить то, что пользователь набрал в элементе input, вы должны использовать атрибут value вместо атрибута innerText.

Node.innerText - это свойство, которое представляет «визуализированный» текст содержимое узла и его потомков. Как получатель, он приближается текст, который получит пользователь, если он выделит содержимое элемент с курсором, а затем скопированы в буфер обмена. - innerText MDN article.

  • Чтобы получить / установить текст внутри элемента (кроме input s), вы должны использовать атрибут textContent. textContent MDN артикул
  • Чтобы прикрепить файл сценария к веб-странице, вы должны использовать тег script, указав путь к файлу в атрибуте src тега script: <script src="path/to/javascript/file.js"></script>
  • Старайтесь избегать использования встроенных прослушивателей событий, вместо этого следует использовать метод addEventListener.

Вот исполняемый фрагмент, чтобы проиллюстрировать все сказанное: 

// create reference to the input and the p#demo to get them when we need them
var btn = document.getElementById('btn'),
  demo = document.getElementById('demo');
// add event listener to the button
btn.addEventListener('click', mySubmit);
// the event handler function
function mySubmit(e) {
  // prevent the default behaviour when the button is clicked
  e.preventDefault();
  // the value of the input must be fetched inside the event handler to get it every time the button is clicked
  var getInput = document.getElementById("answer").value.toLowerCase(),
    text = '',
    database = [{
      answer: "Apple",
      clue: "Steve Jobs"
    }, {
      answer: "Mango",
      clue: "Fruit"
    }],
    i = 0,
    l = database.length;
  for(; i < l; i++) {
    if(database[i].answer.toLowerCase() === getInput) {
      text = database[i].clue;
      break;
    }
  }
  if(text === '') {
    text = "The answer is incorrect";
  }
  demo.textContent = text;
}
    <input type="text" name="inputField" id="answer" placeholder="Enter the answer..." required>
    <button type="button" name="button" id="btn">Submit</button>
    <p id="demo"></p>
0 голосов
/ 02 сентября 2018

Вы можете использовать find помощник по массиву, чтобы найти объект, который соответствует вводу из вашего текстового поля. Он вернет вам объект в соответствии с вашими потребностями. Вы можете проверить документы помощника по поиску массива в MDN.

HTML 

<input type="text" name="inputField" id="answer" placeholder="Enter the answer...">
<button type="button" name="button" onclick="mySubmit()">Submit</button>
<p id="demo"></p>

Сценарий 

function mySubmit() {
        let getInput = answer.value;
        var text;
        var database = [
            { answer: "Apple", clue: "Steve Jobs" },
            { answer: "Mango", clue: "Fruit" }
        ];
        text = database.find((data) => {
            if (data.answer === getInput) {
                return data;
            }
        });
        if (typeof text === 'object')
            text = text.clue;
        else
            text = "The answer is incorrect";
        demo.textContent = text;
    }

Поиск помощника массива - MDN

0 голосов
/ 02 сентября 2018

Было несколько вещей, которые были неверны, но в целом ваш код был почти на месте.

Прежде всего искомый «внутренний текст» на самом деле является «внутренним текстом».
Во-вторых, элементы ввода не имеют innerText. Вместо этого они имеют атрибут «значение».
В-третьих, чтобы включить JavaScript, вы должны использовать тег сценария вместо тега ссылки.

Кроме того, я изменил привязку вашей функции и сделал это в javascript, используя .addEventListener ("click", ...) вместо вашего HTML. Но это в значительной степени предпочтение. В большинстве случаев это приведет к меньшему количеству ошибок, поскольку, если скрипт вообще не загружается, он не будет пытаться найти указанную функцию.

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 id="submit" type="button" name="button">Submit</button>
        <p id="demo"></p>
        <script type="text/javascript" src="./script.js">
    </body>
</html>

Сценарий 

function getInput() {
    return document.getElementById("answer").value;
}

var submitButton = document.getElementById("submit").addEventListener("click", mySubmit);

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

    if(!text) {
        text = "The answer is incorrect";
    }

    document.getElementById("demo").innerText = text;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...