使用Java腳本顯示輸入的特定輸出（來自HTML）

Question

我剛開始使用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形式以“史蒂夫·喬布斯”的形式給出輸出，則代碼應這樣做。

Answer 1

有些事情是不正確的，但總的來說，您的代碼幾乎就在那里。

首先，您要查找的“ innertext”實際上是“ innerText”。
其次，輸入元素沒有innerText。 它們具有屬性“值”。
第三，要包含javascript，您將使用腳本標簽而不是鏈接標簽。

此外，我更改了函數的綁定，並使用.addEventListener（“ click”，...）在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 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;
}

Answer 2

您的代碼中有一些錯誤，讓我嘗試解釋您應該使用什么：

要獲取用戶在input元素中鍵入的內容，應使用value屬性而不是innerText屬性。

Node.innerText是一個屬性，代表節點及其后代的“已渲染”文本內容。 作為一種吸氣劑，它近似於用戶使用光標突出顯示元素的內容然后將其復制到剪貼板時將獲得的文本。 -innerText MDN文章。

要獲取/設置元素（ input s之外）中的文本，應使用textContent屬性。 textContent MDN文章
要將腳本文件附加到網頁中，您應該使用script標記，方法是在script標記的src屬性中放置文件路徑： <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>

Answer 3

您可以使用find array helper查找與您的文本字段輸入匹配的對象。 它會根據您的需要返回對象。 您可以在MDN上查看find array helper的文檔。

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

使用Java腳本顯示輸入的特定輸出（來自HTML）

問題描述

3 個解決方案

解決方案1
0 已采納 2018-09-02 09:00:59

解決方案2
0 2018-09-02 09:16:36

解決方案3
0 2018-09-02 09:38:52

使用Java腳本顯示輸入的特定輸出（來自HTML）

問題描述

3 個解決方案

解決方案1 0 已采納 2018-09-02 09:00:59

解決方案2 0 2018-09-02 09:16:36

解決方案3 0 2018-09-02 09:38:52

解決方案1
0 已采納 2018-09-02 09:00:59

解決方案2
0 2018-09-02 09:16:36

解決方案3
0 2018-09-02 09:38:52