A-AA+then

ถามเรื่อง ปุ่มเลือกสี ที่มีโค๊ดในเว็บนีอะค่ะ

1,216
ถามเรื่อง ปุ่มเลือกสี ที่มีโค๊ดในเว็บนีอะค่ะ

พอเขียนตาม ซอร์สโค๊ดอะค่ะ  แต่พอเวลาจะเอามาใช้ มันออกแต่สีอะค่ะ

แต่พอกดปุ่มเลือกสี ค่าสีมันไม่ออกมาอะค่ะ  ไม่ทราบว่า ทำผิดตรงไหนอะค่ะ

(โค๊ดอยู่ในหน้าเดียวกันหมดค่ะ)

 
ตัวอย่างโค๊ด

ไฟล์ Javascript
<script type="text/javascript">
 //ปุ่มเลือกสี
 for (i = 0; i < 16; i++) {
  var obj = document.getElementById("color" + i);
  obj.onmouseover = function(){this.className = "hover"};
  obj.onmouseout = function(){
   if (this.id == document.getElementById("usercolor").innerHTML) this.className = "current";
   else this.className = "button";
  };
  obj.onclick = function(){selectcolor(this.id)};
 }

 //เมื่อคลิกปุ่ม
 function  selectcolor (id) {
 for (i = 0; i < 16; i++) {
  document.getElementById("color" + i).className = "button";
 };
 if (!document.getElementById(id)) id = "color0";
 document.getElementById("usercolor").innerHTML = document.getElementById(id).title;
 document.getElementById(id).className = "current";
 }
</script>

ไฟล์ CSS
<style>
ol.menu {
  list-style-type:none;
  display:table;
  float:none;
  margin:0 auto;
}
.menu li {
  display:inline;
  white-space:nowrap;
}
.menu span {
  float:left;
  display:table;
  padding:2px;
  cursor:pointer;
}
.button { /* ปุ่มเลือกสี ปกติ */
  margin:1px;
}
.hover { /* ปุ่มเลือกสี เมื่อเมาส์อยู่บน */
  background:#D3E4F5;
  border:1px solid #167FB2;
  margin:0;
}
.current { /* ปุ่มเลือกสี เมื่อเลือก */
  background:#D3E4F5;
  border:1px solid #167FB2;
  margin:0;
}
</style>
  
       

<ol class="menu">
ไฟล์ PHP

<?
//กำหนดโค้ดสีที่ต้องการลงใน array
$color= array("black", "maroon", "#F60310", "#E76E14", "#E7C514", "#1DDC12", "olive", "#148CE7", "navy", "#6C1CEA", "fuchsia", "teal", "purple", "gray", "silver", "white");
for ($i = 0; $i < count($color); $i++) {
  echo "<li><span id=\"color$i\" title=\"$color[$i]\" class=\"button\"><font class=\"btncolor\" style=\"background-color:$color[$i];color:$color[$i]\" >Yy</font></span></li>";
}
?>

</ol>

ตรงนี้คือส่วนแสดงค่าสีใช่มั้ยค่ะ  ตรงนี้อะค่ะ ไม่ออกมาอะค่ะ
<input type="hidden" id="usercolor" name="usercolor"  />



รบกวนด้วยนะค่ะ  ขอบคุนค่ะ

4 ความคิดเห็น

document.getElementById("usercolor").value = document.getElementById(id).title; 
1

แก้แล้วอะค่ะ   ยังไม่ได้เลยค่ะ  ยังค่ามันก้ยังไม่ออก 
2

555++

เข้าใจว่าคงพลาด อะไรไปอย่างหนึ่งนะ

โค้ด ต้องเรียงลำดับตามการทำงาน

CSS อยู่ใน head
HTML หมายถึง ส่วนที่เป็น ปุ่มหรืออะไรก็ตาม ที่เป็น html
Javascript เอาไว้หลังสุด จริงๆ ก็ต่อจาก HTML นั่นแหละ

เหตุผล เพราะ Javascript มันอยู่ก่อน HTML เมื่อ Javascript ทำงานแล้วแต่ หา HTML ไม่เจอ (เพราะ HTML อยู่ต่อจากนี้) มันเลยไม่ทำงาน

การแก้ไข

1.เอาไว้หลัง HTML ที่เกี่ยวข้อง
2.หรือเอา Javascript ใส่ไว้ใน body.onload หรือ window.onload

ปัญหานี้เป็นปัญหาตกม้าตายกันมาเยอะ เพราะเรามักถูกสอน ว่า Javascript ต้องเอาใส่ไว้ในส่วน Head แต่ในความเป็นจริง เราจะใส่ไว้ที่ไหนก็ได้ครับ แต่ต้แงหลังจากที่สร้าง element ที่เกี่ยวข้องเสร็จแล้ว
3

ขอบคุนค่ะ

4
^