เทคนิคการเปลี่ยนรูปสินค้าหรือสีสินค้าด้วย Javascript OnChang (จาวาสคิปต์ ออนเชนจ์)
โพสต์แล้ว: 06/07/2018 1:37 pm
- JavaScript คือ ภาษาคอมพิวเตอร์สำหรับการเขียนโปรแกรมบนระบบอินเทอร์เน็ต ซึ่งใช้ในการสร้างและพัฒนาเว็บไซต์ (ใช้ร่วมกับ HTML) มีวิธีการทำงาน
- JavaScript OnChange คือ เหตุการณ์ที่เมื่อมีการเปลี่ยนแปลงค่าจากค่าปัจจุบันเป็นค่าใหม่
- ก่อนการเขียน code ให้ใช้ภาพไฟล์นามสกุล .jpg และนำไฟล์ภาพให้อยู่ในโฟล์เดอร์ (folder) เดียวกันกับไฟล์งานของเรา
โค้ด: เลือกทั้งหมด
<element OnChange = "function_name">
- 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
- 2. เมื่อคลิกที่ Star Red
- 3. เมื่อคลิกที่ Circle Blue
- 4. เมื่อคลิกที่ Triangle
----------------------------------------------------------------------------------------------------------------------------------------------------------------
_____________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา Javascript, HTML, Ajax และ jQueryซึ่งเป็นความรู้พื้นฐานในการพัฒนา Javascript, HTML5 , Ajax และ jQuery ต่อไป
_____________________________________________________________________________________________
----------------------------------------------------------------------------------------------------------------------------------------------------------------