使用Javascript显示输入(来自HTML)的特定输出
使用Javascript显示输入(来自HTML)的特定输出
提问于 2018-09-02 16:39:17
我刚开始使用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上输出"Steve Jobs“。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-09-02 17:00:59
有一些地方是不正确的，但总体而言，你的代码几乎是正确的。
首先，您要查找的“innerText”实际上是“innerText”。
其次，输入元素没有innerText。相反，它们有一个属性'value‘。
第三，要包含javascript，您应该使用script标记而不是link标记。
此外，我更改了函数的绑定，并在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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52135306
复制相关文章
相似问题