检查输入的值是否真的是一个数字。如果没有，您将在分区下看到一条错误消息

Question

我想在 jquery 中创建一个网页，其中包含两个文本框、一个按钮和一个带有虚拟文本的 div。单击该按钮后，div 的高度和宽度将设置为在文本框中输入的值。使用 parseInt 函数使提交的值成为一个数字。然后检查输入的值是否真的是一个数字。否则，您将在 division 下看到一条错误消息。我的问题是，在这种情况下我如何使用函数 parseInt 和函数 isNaN 并获得错误消息？感谢您的任何建议或帮助:-)

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

Answer 1

试试这个：

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

检查输入的值是否真的是一个数字。如果没有，您将在分区下看到一条错误消息

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

jquery

message

nan

parseint