Recieving Another js value from html attribute getting error [closed]

Question

Here is my code,

<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>

Now the problem after entering right text in input field I am getting the error msg "Given text and Input text not matching",I am unable to figure out the problem,can anyone please help me to sort out the problem?

Answer 1

The problem is the space in let result = ' ';. Remove the space ' ' and it works.

Demo

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()


$(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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>