เทคนิคการเปลี่ยนรูปสินค้าหรือสีสินค้าด้วย Javascript OnChang (จาวาสคิปต์ ออนเชนจ์)

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
pprn
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 565
ลงทะเบียนเมื่อ: 02/07/2018 10:45 am

เทคนิคการเปลี่ยนรูปสินค้าหรือสีสินค้าด้วย Javascript OnChang (จาวาสคิปต์ ออนเชนจ์)

โพสต์โดย pprn » 06/07/2018 1:37 pm

    JavaScript คือ ภาษาคอมพิวเตอร์สำหรับการเขียนโปรแกรมบนระบบอินเทอร์เน็ต ซึ่งใช้ในการสร้างและพัฒนาเว็บไซต์ (ใช้ร่วมกับ HTML) มีวิธีการทำงาน
แบบอ็อบเจ็กโอเรียลเต็ด (Object Oriented Programming : OOP)

    JavaScript OnChange คือ เหตุการณ์ที่เมื่อมีการเปลี่ยนแปลงค่าจากค่าปัจจุบันเป็นค่าใหม่

    ก่อนการเขียน code ให้ใช้ภาพไฟล์นามสกุล .jpg และนำไฟล์ภาพให้อยู่ในโฟล์เดอร์ (folder) เดียวกันกับไฟล์งานของเรา

รูปแบบคำสั่ง OnChang


อธิบายโค้ด
- function_name คือ ชื่อฟังก์ชั่น


รูปแบบคำสั่ง การเปลี่ยนรูปสินค้าหรือสีสินค้าด้วย Javascript OnChang (จาวาสคิปต์ ออนเชนจ์)

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html><head>
   <script src="https://ajax.googleapis.com/jquery.min.js"></script>
   
   <script>
      
      function function_name() {    
         var variable_name = document.getElementById("element_id_input").value + ".jpg";   
         document.getElementById("element_id_output").src = variable_name;      
      }
      
   </script>
</head>
<body>
   <select onchange ="function_name();" id="element_id_input">
      <option> Text_output </option>
      <option value="picture_name"> Text_output </option>
   </select>
   
   <br><img id="element_id_output" src="">

</body>
</html>


อธิบายโค้ด

    - <script src="https://ajax.googleapis.com/jquery.min.js"></script> คือ Google CND
    - function_name คือ ชื่อฟังก์ชั่น
    - variable_name คือ ชื่อตัวแปร
    - document.getElementById คือ คำสั่งสำหรับการเข้าถึง Element Id
    - element_id_input" คือ ชื่อไอดี
    - element_id_output คือ ชื่อไอดี
    - value + ".jpg"; คือ ใช้ไฟล์ที่มีนามสกุล .jpg เท่านั้น
    - picture_name คือ ชื่อไฟล์รูปภาพ
    - Text_output คือ ข้อความที่ต้องการพิมพ์ออกมาแสดงให้ผู้ใช้เห็น

ตัวอย่าง

    ภาพมีชื่อว่า Star Yellow.jpg, Star Red.jpg, Circle Blue.jpg และ Triangle.jpg

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html><head>
   <script src="https://ajax.googleapis.com/jquery.min.js"></script>
   
   <script>
      
      function imag() {    
         var image = document.getElementById("choose").value + ".jpg";   
         document.getElementById("picture").src = image;      
      }
      
   </script>
</head>
<body>
   <select onchange ="imag();" id="choose">
      <option>Change Color</option>
      <option value="Star Yellow">Star Yellow</option>
      <option value="Star Red">Star Red</option>
      <option value="Circle Blue">Circle Blue</option>
      <option value="Triangle">Triangle</option>
   </select>
   
   
   <br><img id="picture" src="">

</body>
</html>


ผลลัพธ์

    1. เมื่อคลิกที่ Star Yellow

      star yellow.JPG
      เมื่อคลิกที่ Star Yellow
      star yellow.JPG (16.87 KiB) เปิดดู 261 ครั้ง

    2. เมื่อคลิกที่ Star Red

      star red.JPG
      เมื่อคลิกที่ Star Red
      star red.JPG (18.81 KiB) เปิดดู 261 ครั้ง

    3. เมื่อคลิกที่ Circle Blue

      circle blue.JPG
      เมื่อคลิกที่ Circle Blue
      circle blue.JPG (18.87 KiB) เปิดดู 261 ครั้ง

    4. เมื่อคลิกที่ Triangle

      triangle.JPG
      เมื่อคลิกที่ Triangle
      triangle.JPG (19.61 KiB) เปิดดู 261 ครั้ง



----------------------------------------------------------------------------------------------------------------------------------------------------------------
_____________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา Javascript, HTML, Ajax และ jQueryซึ่งเป็นความรู้พื้นฐานในการพัฒนา Javascript, HTML5 , Ajax และ jQuery ต่อไป
_____________________________________________________________________________________________

----------------------------------------------------------------------------------------------------------------------------------------------------------------

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 55 และ บุคคลทั่วไป 0 ท่าน