Aquí está mi código,

 <section class="page-section portfolio" id="portfolio"> <div class="container"> <center> <h4 id="randomText"></h4> <input type="text" class="form-control mb-2" placeholder="Enter Text " id="enter_text" required autofocus> <button id='verify_id' class="btn btn-primary btn-lg">Verify</button> <br><br> <p id="text_showing"></p> </center> </div> </section> <script> const characters ='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'; function generateString() { var length = 8; let result = ' '; const charactersLength = characters.length; for ( let i = 0; i < length; i++ ) { result += characters.charAt(Math.floor(Math.random() * charactersLength)); } return result;

}

 function show_text(){ document.getElementById('randomText').innerHTML=generateString(); } show_text() </script> <script defer> $(document).ready(function(){ $("#verify_id").click(function(){ var text=$('#enter_text').val(); var text1=$('#randomText').text(); if (text == text1){ $('#text_showing').text("You have successfully verified the text").css({ 'color': 'green', 'font-size': '150%' }); } else{ $('#text_showing').text("Given text and Input text not matching ").css({ 'color': 'red', 'font-size': '150%' }); } }); }); </script>

Ahora, el problema después de ingresar el texto correcto en el campo de entrada aparece el mensaje de error "El texto dado y el texto de entrada no coinciden", no puedo resolver el problema, ¿alguien puede ayudarme a resolver el problema?