To display specific output for an input (from HTML) using Javascript
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".
3 Answers
3
There were a few things that weren't correct but overall your code was almost there.
First of all the 'innertext' you were looking for is actually 'innerText'.
Secondly, input elements don't have an innerText. They have an attribute 'value' instead.
Thirdly, to include javascript you'd use a script tag instead of a link tag.
Furthermore, I changed the binding of your function and did that in javascript using .addEventListener("click", ...) instead of in your HTML. But this is pretty much preference. Most of the time it will cause fewer errors though since if the script isn't loaded at all it won't try to find the specified function.
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>
Script
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;
for
Apple
answer is incorrect
@ths Thank you, I've rewritten the code section that didn't work.
– Ben Bachem
Sep 2 at 16:46
You have some mistakes in your code, let me try to explain what you should use instead:
input
value
innerText
Node.innerText is a property that represents the "rendered" text
content of a node and its descendants. As a getter, it approximates
the text the user would get if they highlighted the contents of the
element with the cursor and then copied to the clipboard. - innerText MDN article.
Node.innerText
input
textContent
script
src
script
<script src="path/to/javascript/file.js"></script>
addEventListener
Here's a runnable snippet to illustrate all what being said:
// 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>
You can use find array helper to find the object that matches the input from your textfield. It'll return you the object as per your need. You can check the docs of find array helper on MDN.
find
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>
Script
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;
Find array helper - MDN
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
You code is wrong. You must break the
forloop when you find the correct answer. If you writeApplein the input field then you'll getanswer is incorrect.– ths
Sep 2 at 9:20