Check whether the entered value is actually a number. If not, you will see an error message under the division

问题

I want to create in jquery a web page with two text boxes, a button and a div with dummy text. After clicking the button, the height and width of the div is set with the values entered in text boxes. Make a submitted values a number using the parseInt function. Then check whether the entered value is actually a number. If not, you will see an error message under the division. My question is, how can i use function parseInt and also function isNaN in this case and get error message ? Thanks for any advice or help :-)

<!DOCTYPE HTML>
<html>
<head>
  <!-- Character Encoding -->
  <meta charset="utf-8">
  <!--Descriptive Title-->
  <title>Les 9-4</title>
  <!-- CSS style -->
  <style>
  body {
            font-family: Verdana, Geneva, sans-serif;
            font-size: 24px;
        }

        .blauw {
            color: #06F;
        }

        #divResult {
            width: 600px;
            height: 350px;
            border: 2px solid #D3D3D3;
            margin: 10px 0;
        }

        #txtColor {
            width: 200px;
        }
  </style>  
  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
  <!-- jquery -->
  <script>
  $(document).ready(function () {
  $('#btnKnop').on('click', function () {
    
    
    var waarde1 = $('#Hoogte').val();
    var waarde2 = $('#Breedte').val();
    
   
    $('#divResult').css('height', waarde1 + 'px').css('width', waarde2 + 'px');
    
    
    
    $('#Hoogte').on('click', function () {
      $(this).val('');
    $('#Breedte').on('click', function () {
      $(this).val('');
    })
    });
  });
});
  </script>
</head>
<!-- Body Section -->   
<body>
  <input type="text" id="Hoogte" placeholder="Hoogte...">
  <input type="text" id="Breedte" placeholder="Breedte...">
  <button id="btnKnop">OK</button>  
  <div id="divResult"> Height and width of the div is set with the values entered in text boxes. Make a submitted values a number using the parseInt function. Then check whether the entered value is actually a number. If not, you will see an error message under the division...    </div>
</body>

</html>

回答1:

Try this:

<!DOCTYPE HTML>
<html>
<head>
  <!-- Character Encoding -->
  <meta charset="utf-8">
  <!--Descriptive Title-->
  <title>Les 9-4</title>
  <!-- CSS style -->
  <style>
  body {
            font-family: Verdana, Geneva, sans-serif;
            font-size: 24px;
        }

        .blauw {
            color: #06F;
        }

        #divResult {
            width: 600px;
            height: 350px;
            border: 2px solid #D3D3D3;
            margin: 10px 0;
        }

        #errorMessage {
            color: red;
        }

        #txtColor {
            width: 200px;
        }
  </style>  
  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
  <!-- jquery -->
  <script>
  $(document).ready(function () {
  $('#btnKnop').on('click', function () {

    var waarde1 = $('#Hoogte').val();
    var waarde2 = $('#Breedte').val();        

   if(isNaN(parseInt(waarde1)) || isNaN(parseInt(waarde2))){
      $('#errorMessage').text(`Error ${isNaN(parseInt(waarde1)) ? 'waarde1 isNaN ' : ''} ${isNaN(parseInt(waarde2)) ? 'waarde2 isNaN ' : ''}`);
   } else {
       $('#errorMessage').text('');
   }
   /* Alternative
   if(isNaN(+waarde1) || isNaN(+waarde2)){
     $('#errorMessage').text(`Error ${isNaN(+waarde1) ? 'waarde1 isNaN ' : ''} ${isNaN(+waarde2) ? 'waarde2 isNaN ' : ''}`);    
   } else {
       $('#errorMessage').text('');
   }
   */   
    $('#divResult').css('height', waarde1 + 'px').css('width', waarde2 + 'px');
    
    
    
    $('#Hoogte').on('click', function () {
      $(this).val('');
    $('#Breedte').on('click', function () {
      $(this).val('');
    })
    });
  });
});
  </script>
</head>
<!-- Body Section -->   
<body>
  <input type="text" id="Hoogte" placeholder="Hoogte...">
  <input type="text" id="Breedte" placeholder="Breedte...">
  <button id="btnKnop">OK</button>  
  <p id="errorMessage"></p>
  <div id="divResult"> Height and width of the div is set with the values entered in text boxes. Make a submitted values a number using the parseInt function. Then check whether the entered value is actually a number. If not, you will see an error message under the division...    </div>
</body>

</html>

来源：https://stackoverflow.com/questions/62521441/check-whether-the-entered-value-is-actually-a-number-if-not-you-will-see-an-er

标签

jquery

message

nan

parseint