Q - ค่าสีไม่เปลี่ยนตามประเภทของสีที่เลือกไว้ในถาดสี

[Buck Kittisak]

1.jpg (37.17 KiB) Viewed 4542 times

2.jpg (21.29 KiB) Viewed 4542 times

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

    <script>
        $(document).ready(function () {
            $("#tlandc_color").on('input', function () {
                updateColorValue();
            });     
            // ใช้ Spectrum สำหรับตัวเลือกสี
            $("#convert_color").spectrum({
                preferredFormat: "hex",
                showInput: true,
                allowEmpty: true,
                showPalette: true,
                palette: [
                    ['#000000', '#ffffff', '#ff0000', '#00ff00', '#0000ff'],
                    ['#ffff00', '#00ffff', '#ff00ff', '#c0c0c0', '#808080']
                ],
                change: function (color) {
                    var colorType = $('#convert_color_type').val(); 
                    var colorValue;
        
                    if (colorType === 'RGB') {
                        colorValue = color.toRgbString(); // แปลงเป็น RGB
                    } else if (colorType === 'Color name') {
                        colorValue = tinycolor(color).toName() || color.toHexString(); 
                    } else {
                        colorValue = color.toHexString(); /
                    }
        
                    $('#convert_color').val(colorValue); 
                },
                hide: function(color) {
                    updateColorValue(); 
                }
            });
        
            function updateColorValue() {
                var selectedColorType = $("#convert_color_type").val(); 
                var selectedColor = $("#tlandc_color").val(); 
                var colorValue;
        
                if (selectedColorType === "RGB") {
                    // ใช้ TinyColor เพื่อแปลงจาก Hex เป็น RGB
                    colorValue = tinycolor(selectedColor).toRgbString(); 
                } else if (selectedColorType === "Hex") {
                    colorValue = selectedColor; 
                } else if (selectedColorType === "Color name") {
                    colorValue = tinycolor(selectedColor).toName() || selectedColor; 
                }
        
                $("#convert_color").val(colorValue); 
            }
        });
        
        // ตรวจสอบค่าของสีเมื่อมีการป้อนข้อมูล
        document.getElementById('tlandc_color').addEventListener('input', function() {
            console.log(this.value); 
        });
        </script>

ปัญหาคือ เลือกประเภทสีไว้เป็น RGB และกดเลือกสีจากถาดสี ในช่องสีแสดงเป็นค่า RGB ปกติ หลังจากนั้นกด OK ค่าสีเปลี่ยนไปเป็น HEX อันนี้ใครพอมีวิธีแก้หรือแนะนำได้บ้างครับ

[eange08]

ได้ลอง console.log เช็คว่าช่องประเภทสีรับอะไรมาหรือยังค่ะ

JavaScript & jQuery Ajax & Node.JS-1.png (3.77 KiB) Viewed 4528 times

[eange08]

ได้ลอง console.log เช็คว่าช่องประเภทสีรับอะไรมาหรือยังค่ะ
JavaScript & jQuery Ajax & Node.JS-1.png

ลองเช็คด้วยค่าที่รับมา กับเงื่อนไขที่เช็คในการ convert ตรงกันหรือไม่

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

function updateColorValue() {
                var selectedColorType = $("#convert_color_type").val();  <<---เช็คที่รับมาเป็นอะไร ตรงกับเงื่อนไขที่เช็คไว้ไหม
                var selectedColor = $("#tlandc_color").val(); 
                var colorValue;
        
                if (selectedColorType === "RGB") { <<---- ลองเปลี่ยนเป็นแค่ == 
                    // ใช้ TinyColor เพื่อแปลงจาก Hex เป็น RGB
                    colorValue = tinycolor(selectedColor).toRgbString(); 
                } else if (selectedColorType === "Hex") {
                    colorValue = selectedColor; 
                } else if (selectedColorType === "Color name") {
                    colorValue = tinycolor(selectedColor).toName() || selectedColor; 
                }
        
                $("#convert_color").val(colorValue); 
            }

[Buck Kittisak]

ขอบคุณครับ เดี่ยวจะลองเช็คอีกทีตามที่แนะนำครับ

[Buck Kittisak]

ได้ลอง console.log เช็คว่าช่องประเภทสีรับอะไรมาหรือยังค่ะ
JavaScript & jQuery Ajax & Node.JS-1.png

ลองเช็คด้วยค่าที่รับมา กับเงื่อนไขที่เช็คในการ convert ตรงกันหรือไม่

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

function updateColorValue() {
                var selectedColorType = $("#convert_color_type").val();  <<---เช็คที่รับมาเป็นอะไร ตรงกับเงื่อนไขที่เช็คไว้ไหม
                var selectedColor = $("#tlandc_color").val(); 
                var colorValue;
        
                if (selectedColorType === "RGB") { <<---- ลองเปลี่ยนเป็นแค่ == 
                    // ใช้ TinyColor เพื่อแปลงจาก Hex เป็น RGB
                    colorValue = tinycolor(selectedColor).toRgbString(); 
                } else if (selectedColorType === "Hex") {
                    colorValue = selectedColor; 
                } else if (selectedColorType === "Color name") {
                    colorValue = tinycolor(selectedColor).toName() || selectedColor; 
                }
        
                $("#convert_color").val(colorValue); 
            }

ลองใช้ == ยังไม่ได้ครับ และเช็คค่ายังไม่มีข้อมูล

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

var selectedColorType = $("#convert_color_type").val();
                console.log(selectedColorType); < ตรวจสอบค่าใน console

[eange08]

ได้ลอง console.log เช็คว่าช่องประเภทสีรับอะไรมาหรือยังค่ะ
JavaScript & jQuery Ajax & Node.JS-1.png

ลองเช็คด้วยค่าที่รับมา กับเงื่อนไขที่เช็คในการ convert ตรงกันหรือไม่

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

function updateColorValue() {
                var selectedColorType = $("#convert_color_type").val();  <<---เช็คที่รับมาเป็นอะไร ตรงกับเงื่อนไขที่เช็คไว้ไหม
                var selectedColor = $("#tlandc_color").val(); 
                var colorValue;
        
                if (selectedColorType === "RGB") { <<---- ลองเปลี่ยนเป็นแค่ == 
                    // ใช้ TinyColor เพื่อแปลงจาก Hex เป็น RGB
                    colorValue = tinycolor(selectedColor).toRgbString(); 
                } else if (selectedColorType === "Hex") {
                    colorValue = selectedColor; 
                } else if (selectedColorType === "Color name") {
                    colorValue = tinycolor(selectedColor).toName() || selectedColor; 
                }
        
                $("#convert_color").val(colorValue); 
            }

ลองใช้ == ยังไม่ได้ครับ และเช็คค่ายังไม่มีข้อมูล

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

var selectedColorType = $("#convert_color_type").val();
                console.log(selectedColorType); < ตรวจสอบค่าใน console

- ลองเช็คดูว่าชื่อที่เรียก element "convert_color_type" นี้ตรงกับที่ใช้ในฟอร์มหรือไม่
เช็คการรับค่าจุดอื่นด้วย console.log() ที่ใช้ตอนเลือกสีเสร็จด้วยค่ะ
- ที่ใช้ == ยังไม่ได้เพราะ selectedColorType มันไม่มีค่ามาให้เข้าเงื่อนไข

[Buck Kittisak]

- เช็คตาม Loop ว่าเข้าที่ Loop ไหน
- เช็คการใช้ Function การใช้งานแต่ละ Loop