โปรแกรมบวก ลบ คูณ หาร โดยใช้Onclick Javascript

โปรแกรมบวก ลบ คูณ หาร โดยใช้Onclick Javascript | โปรแกรมที่เขียนโดยภาษาPHP

โปรแกรมบวก ลบ คูณ หาร โดยใช้Onclick Javascript ซึ่งเขียนด้วยภาษาPHP ผสมผสานกับJavascript โดยโปรแกรมจะเป็นการกรอกข้อมูลที่ช่องinput และคลิกเลือกเครื่องหมายดำเนินการ ก็จะได้ผลลัพธ์ตามต้องการ โดยไม่ต้องรีเฟรช ถ้าไม่ดำเนินการกรอกข้อมูลอะไร จะขึ้นERROR

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

เวอร์ชั่น : 1.0

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

โปรแกรมบวกเลขโดยกรอกข้อมูลทั้งสองช่อง ทั้งinput1 และinput2 แล้วทำการเลือกเครื่องหมายดำเนินการ + - * / เพื่อประมวลผลลัพธ์ที่ต้องการ 

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

cal3.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>Untitled Document</title>
<script language="javascript">
       
  function a(){    
      
       var int1 = document.getElementById("input1").value;
       var int2 = document.getElementById("input2").value;      
       var n1 = parseInt(int1);
       var n2 = parseInt(int2);                  
       if ((isNaN(n1))||(isNaN(n2))){
           document.getElementById("show").setAttribute("color","red");
           show.innerHTML="ERROR";
       }    
       else {         
          s=n1+n2;      
          document.getElementById("show").setAttribute("color","green");
          show.innerHTML=s;
       }
      }
  function b(){    
      
       var int1 = document.getElementById("input1").value;
       var int2 = document.getElementById("input2").value;      
       var n1 = parseInt(int1);
       var n2 = parseInt(int2);                  
       if ((isNaN(n1))||(isNaN(n2))){
           document.getElementById("show").setAttribute("color","red");
           show.innerHTML="ERROR";
       }    
       else {         
          s=n1-n2;      
          document.getElementById("show").setAttribute("color","green");
          show.innerHTML=s;
       }
      }  
  function c(){    
      
       var int1 = document.getElementById("input1").value;
       var int2 = document.getElementById("input2").value;      
       var n1 = parseInt(int1);
       var n2 = parseInt(int2);                  
       if ((isNaN(n1))||(isNaN(n2))){
           document.getElementById("show").setAttribute("color","red");
           show.innerHTML="ERROR";
       }    
       else {         
          s=n1*n2;      
          document.getElementById("show").setAttribute("color","green");
          show.innerHTML=s;
       }
     }
  function d(){    
      
       var int1 = document.getElementById("input1").value;
       var int2 = document.getElementById("input2").value;      
       var n1 = parseInt(int1);
       var n2 = parseInt(int2);    
       if ((isNaN(n1))||(isNaN(n2))){
           document.getElementById("show").setAttribute("color","red");
           show.innerHTML="ERROR";
       }    
       else {         
          s=n1/n2;      
          document.getElementById("show").setAttribute("color","green");
          show.innerHTML=s;
       }      
     }   
</script>
</head>

<body>
      <center>
        ช่อง1  : <input id="input1" name="input1" size="10" /><br />
        ช่อง2  : <input id="input2" name="input2" size="10" /><br />       
        ผลลัพธ์ : <font id="show" color=""></font> <br />        
    
        <button onclick="javascript: a();">+</button>
        <button onclick="javascript: b();">-</button>
        <button onclick="javascript: c();">x</button>
        <button onclick="javascript: d();">/</button>
      </center>
</body>
</html>

 

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

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

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

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