Soy nuevo en la codificación. Estaba trabajando en un sitio web de mecanografía que hace coincidir la palabra en el campo de texto con la palabra que se muestra en el sitio web. Cómo escribir la función en Javascript. Esto es lo que he probado.
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/bootstrap@5.0.2/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/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> </body> </html>El problema es que toma el valor cuando se carga el documento, pero en este punto el valor está vacío.
Si cambia su código a esto, debería estar actualizando el campo h4 mientras escribe.
let displayWord = document.getElementById("word").innerHTML; let displayMessage = document.getElementById("message"); let inpWord = document.getElementById("input"); function matchWords() { if (displayWord === inpWord.value) { displayMessage.innerText = "words matching"; } } input.addEventListener("keyup", matchWords);su secuencia de comandos se ve bien por mucho, solo necesita configurar un controlador de eventos en su entrada para activar su función cuando el usuario la escribe.
debajo de su código refactorizado con algunas sugerencias:
use const en lugar de let cuando la variable no va a cambiar.
¿Es mejor almacenar el elemento HTML de esa manera podrá hacer más con él?
en este caso, uso el elemento de entrada para cambiar su color de contorno y también cambiar el mensaje
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()