文章/答案/技术大牛

发布

社区首页 >问答首页 >检查输入的值是否为实际的数字。如果不是，您将在分区下看到一条错误消息

问检查输入的值是否为实际的数字。如果不是，您将在分区下看到一条错误消息
EN

Stack Overflow用户

提问于 2020-06-23 02:47:45

回答 1查看 36关注 0票数 0

我想在jquery中创建一个包含两个文本框、一个按钮和一个带有虚拟文本的div的网页。单击该按钮后，将使用在文本框中输入的值设置div的高度和宽度。使用parseInt函数使提交的值成为一个数字。然后检查输入的值是否实际上是一个数字。如果没有，您将在该分区下看到一条错误消息。我的问题是，在这种情况下，如何使用函数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>

jquery

message

nan

parseint

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-06-29 02:09:24

试试这个：

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62521441

复制

相似问题

问检查输入的值是否为实际的数字。如果不是，您将在分区下看到一条错误消息
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问检查输入的值是否为实际的数字。如果不是，您将在分区下看到一条错误消息EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问检查输入的值是否为实际的数字。如果不是，您将在分区下看到一条错误消息
EN