使用Javascript显示输入（来自HTML）的特定输出_Javascript_Html_Web_Web Deployment

使用Javascript显示输入（来自HTML）的特定输出

javascript html web

使用Javascript显示输入（来自HTML）的特定输出,javascript,html,web,web-deployment,Javascript,Html,Web,Web Deployment,我刚开始使用JavaScript，希望构建一个HTML页面，该页面接受输入，JavaScript从HTML获取输入，搜索数据库数组，并显示每个输入的特定输出。以下是HTML： <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>My Webpage!</title> </head>

我刚开始使用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>


我的网页！





提交

有一些事情是不正确的，但总的来说，您的代码几乎是正确的
首先，您要查找的“innertext”实际上是“innertext”。

其次，输入元素没有innerText。它们有一个属性“value”。

第三，要包含javascript，您需要使用脚本标记而不是链接标记
此外，我更改了函数的绑定，并在javascript中使用.addEventListener（“单击”），而不是在HTML中进行了更改。但这几乎是一种偏好。但大多数情况下，它会导致更少的错误，因为如果根本不加载脚本，它将不会尝试查找指定的函数
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;
}

函数getInput（）{
返回document.getElementById（“应答”）.value；
}
var submitButton=document.getElementById（“提交”）.addEventListener（“单击”，mySubmit）；
函数mySubmit（）{
var文本；
变量数据库=[
{回答：“苹果”，线索：“史蒂夫·乔布斯”}，
{回答：“芒果”，线索：“水果”}
];
对于（var i=0；i您的代码中有一些错误，让我试着解释一下您应该使用什么：

要获取用户在输入
元素中键入的内容，应使用值
属性，而不是内部文本
属性

节点。innerText是一个表示“渲染”文本的属性
节点及其子节点的内容。作为getter，它近似于
如果用户突出显示
元素，然后将其复制到剪贴板。-

要获取/设置元素内的文本（而不是input
s），应使用textContent
属性
要在网页中附加脚本文件，您应该通过在脚本
标记的src
属性中插入文件路径来使用脚本
标记：
尽量避免使用内联事件侦听器，而应使用addEventListener
方法

下面是一个可运行的片段来说明所说的一切：

//创建对输入和p#demo的引用，以便在需要时获取它们
var btn=document.getElementById（'btn'），
demo=document.getElementById（'demo'）；
//将事件侦听器添加到按钮
btn.addEventListener（'click'，mySubmit）；
//事件处理函数
函数mySubmit（e）{
//防止单击按钮时出现默认行为
e、 预防默认值（）；
//必须在事件处理程序中获取输入值，以便在每次单击按钮时获取该值
var getInput=document.getElementById（“答案”）.value.toLowerCase（），
文本=“”，
数据库=[{
回答：“苹果”，
线索：“史蒂夫·乔布斯”
}, {
回答：“芒果”，
线索：“水果”
}],
i=0，
l=数据库长度；
对于（；i


提交
您可以使用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>

你的代码是错误的。当你找到正确的答案时，你必须打破for
循环。如果你在输入字段中写入Apple
，你将得到答案是错误的。@谢谢，我已经重写了不起作用的代码部分。
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;
}

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