โปรแกรมบวกเลข onkeyup ฟังก์ชั่นJavascript

โปรแกรมบวกเลข onkeyup ฟังก์ชั่นJavascript | โปรแกรมที่เขียนโดยภาษาPHP

โปรแกรมบวกเลข onkeyup ฟังก์ชั่นJavascript เป็นหนึ่งในตัวอย่างโปรแกรมที่พัฒนาด้วยภาษาphp โดยหลักการของโปรแกรมคือการป้อนข้อมูลเข้าไปทั้งสองช่อง โปรแกรมจะทำการบวกเลขอัตโนมัติด้วยOnkeyup ซึ่งเป็นฟังก์ชั่นของJavascript

โปรแกรมนี้เขียนขึ้นเพื่อใช้สำหรับโปรแกรมเมอร์มือใหม่ในการศึกษาค้นคว้าแนววิธีการเขียนโปรแกรมเท่านั้น โดยท่านใดจะนำฟังก์ชั่นไปประยุกต์กับระบบขนาดกลางและขนาดใหญ่ได้เลย

ชื่อโปรแกรม : โปรแกรมคำนวณโดยใช้Onkeyup

เวอร์ชั่น : 1.0

เนื้อหาของโปรแกรม

โปรแกรมบวกเลขอัตโนมัติโดยไม่ต้องกดปุ่มSubmit แต่ส่งค่าอัตโนมัติด้วยJavascript โดยใช้Onkeyup

ขอขอบคุณวีดีโอyoutube จากคุณNG-Review Chanel

cal2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>โปรแกรมคำนวณ</title>

<script type='text/javascript'>
function nStr(){
    var int1 =document.getElementById('input1').value;
    var int2=document.getElementById('input2').value;    
    var n1 = parseInt(int1);
    var n2 = parseInt(int2);        
    var show=document.getElementById('show');
    
     if (isNaN(n1)){    
          document.getElementById("show").setAttribute("color","red");       
          show.innerHTML="ERROR"
         if (int2.length>0){
             if (isNaN(int1)){
                 document.getElementById("show").setAttribute("color","red");
                 show.innerHTML="ERROR"
             }  
             else if (isNaN(int2)){
                 document.getElementById("show").setAttribute("color","red");
                 show.innerHTML="ERROR"
             }           
             else  if (int1.length >0){
                   document.getElementById("show").setAttribute("color","Blue");    
                 show.innerHTML=n1+n2;
             }            
             else if (int2.length>0){
                 document.getElementById("show").setAttribute("color","Blue");    
                 show.innerHTML=n2;
             }
          }   
       }          
     else if (int1.length > 0) {     
         if (isNaN(int2)){
               document.getElementById("show").setAttribute("color","red");
               show.innerHTML="ERROR"
         }    
         else if (int2.length >0){
               document.getElementById("show").setAttribute("color","Blue");    
               show.innerHTML=n1+n2;
         }                     
         else if (int1.length > 0){
               document.getElementById("show").setAttribute("color","Blue");    
               show.innerHTML=n1;
       }            
     }
   }
   function addCommas(nStr) //ฟังชั่้นเพิ่ม คอมม่าในการแสดงเลข
    {
        nStr += '';
        x = nStr.split('.');
        show = x[0];
        x2 = x.length > 1 ? '.' + x[1] : '';
        var rgx = /(d+)(d{3})/;
        while (rgx.test(x1)) {
        show = show.replace(rgx, '$1' + ',' + '$2');
        }
        return x1 + x2;
    }
</script>
</head>

<body>
<center>
<p><b>โปรแกรมคำนวณบวกเลข</b></p>
      Input1 :<input type='text' id='input1' onkeyup='nStr()'> <br />
      Input2 :<input type='text' id='input2' onkeyup='nStr()'><br />
      ผลลัพธ์  : <font id="show" color=""></font>  
</center>
</body>
</html>

 

รายละเอียดเว็บไซต์

  • เกี่ยวกับเว็บไซต์: เว็บไซต์phpfuture รวบรวมความรู้ด้านการเขียนโปรแกรม ข่าวสารเทคโนโลยี แอพพลิเคชั่น คอมพิวเตอร์ พร้อมตัวอย่างโปรเจคphp โปรเจคc# โปรเจคjava เพื่อใช้ในการศึกษา และยังรวบรวมบทความด้านอื่นๆ ทั้งหมดอยู่บนเว็บไซต์ พีเอสพีฟิวเจอร์
  • Email: support@phpfuture.com
  • Website:www.phpfuture.com
  • Tell:ไม่เปิดเผย

ข้อมูลเว็บไซต์

เว็บไซต์เพื่อนบ้าน