Issue
I am new in coding. I was working on a typing website which match the word in text field to the word shown in the website. How to write the function in Javascript. Here is what I have tried.
let displayWord = document.getElementById('word').innerHTML
let displayMessage = document.getElementById('message')
let inpWord = document.getElementById('input').value
function matchWords() {
if(displayWord === inpWord){
console.log('words matching')
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body class="bg-secondary text-white">
<header class="text-center p-2 bg-dark ">
<h1>Typing test</h1>
</header>
<div class="container text-center">
<div class="row">
<div class="col-md-6 mx-auto">
<p class="p-4">Type The Given Text</p>
<h2 class="word pb-4" id="word">Hello</h2>
<input class="form-control form-control-lg" type="text" name="" id="input">
<h4 id="message" class="p-4"></h4>
</div>
</div>
</div>
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>Solution
your script looks good by far, you just need to set an event handler to your input to trigger your function when user types in it.
below your code refactored with some suggestions:
-
use const instead of let when variable is not going to change.
-
is it better to store the HTML element that way you’ll be able to do more with it.
in this case I use the input element to change its outline color and also change the message
const word = document.getElementById('word')
const message = document.getElementById('message')
const inputText = document.getElementById('input')
function matchWords() {
if(word.innerHTML === inputText.value){
message.innerHTML = "It does match!"
inputText.style.outline = "1px solid green"
} else {
message.innerHTML = "It does not match!"
inputText.style.outline = "1px solid red"
}
}
inputText.onkeyup = () => matchWords()
Answered By – SimonDX
Answer Checked By – Pedro (BugsFixing Volunteer)