Estoy tratando de hacer un palíndromo simple.
Cuando estoy probando en la consola, funciona bien. Sin embargo, cuando trato de vincularlo con HTML, no puedo hacer que funcione. Creo que esto se debe a un error al extraer el texto del campo de entrada en el archivo HTML...
JavaScript:
const str = document.getElementById('input').value; function reverseString(str){ let string = str.toLowerCase(); let splitStr = string.split(''); let revString = splitStr.reverse(''); let joinStr = revString.join(''); return joinStr; } function compare(str){ if (reverseString(str) === str){ document.querySelector("#answer").innerHTML = 'Its a Palindrom'; } else { document.querySelector("#answer").innerHTML = 'Its not a Palindrom'; } }HTML
<body> <div class="checkerContainer"> <h1 id="heading">Palendrom Checker</h1> <h2 id="subtext">Enter a word of phrase!</h2> <div id="answer">Answer will output here!</div> <input type="text" id="input" placeholder="Enter your word or phrase here!"> <button type="button" id="submit" onclick="compare(str)">Check!</button> </div> </body> Cuando cambio la compare(str) para enviar a la consola, funciona bien:
const str = document.getElementById('input').value; function reverseString(str){ let string = str.toLowerCase(); let splitStr = string.split(''); let revString = splitStr.reverse(''); let joinStr = revString.join(''); return joinStr; } function compare(str){ if (reverseString(str) === str){ console.log('Its a Palindrom') } else { console.log('Its not a Palindrom') } }Debe recuperar la cadena de la entrada en el momento en que la va a probar, por lo que debe compare . Cómo lo tiene ahora, está obteniendo el valor de entrada antes de escribir cualquier cosa.
function compare(){ const str = document.getElementById('input').value; if (reverseString(str) === str){ document.querySelector("#answer").innerHTML = 'Its a Palindrom'; } else { document.querySelector("#answer").innerHTML = 'Its not a Palindrom'; } }