เรียกใช้ Javascirpt ไม่ได้

[Buck Kittisak]

ผมได้สร้าง ไฟล์ Javascript เพื่อแยกออกมาจาก HTMl ดังนี้ครับ
path เก็บไฟล์ Javascript

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

phpBB\styles\prosilver\template\tools_land_building_tax_calculation.js

คำสั่งที่เรียกใช้ Javascript ในหน้า HTML

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

<script src="{T_TEMPLATE_PATH}/tools_land_building_tax_calculation.js" ></script>

ไฟล์ tools_land_building_tax_calculation.js

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

document.addEventListener('DOMContentLoaded', (event) => {
    grecaptcha.ready(function () {
        grecaptcha.execute('6Le2T_EpAAAAAPPBAnH-FGKUtS3qQinw0ddSu49X', { action: 'contact' })
            .then(function (token) {
                var recaptchaResponse = document.getElementById('recaptchaResponse');
                recaptchaResponse.value = token;
            });
    });

    function formatNumberInput(input) {
        let value = input.value.replace(/,/g, '');
        input.value = parseFloat(value).toLocaleString('en-US');
    }

    document.getElementById('tlandc_land_value').addEventListener('input', function () {
        formatNumberInput(this);
    });

    document.getElementById('tlandc_building_value').addEventListener('input', function () {
        formatNumberInput(this);
    });

    document.querySelector('form').addEventListener('submit', function () {
        let landValueInput = document.getElementById('tlandc_land_value');
        let buildingValueInput = document.getElementById('tlandc_building_value');

        landValueInput.value = landValueInput.value.replace(/,/g, '');
        buildingValueInput.value = buildingValueInput.value.replace(/,/g, '');
    });

    function resetForm() {
        document.getElementById("tlandc_username").value = "";
        document.getElementById("tlandr_category_id").selectedIndex = 0;
        document.getElementById("tlandc_land_value").value = "";
        document.getElementById("tlandc_building_value").value = "";
        document.getElementById("save_data_tax").checked = false;
    }

    document.getElementById('reset-button').addEventListener('click', resetForm);

    function checkLandType() {
        var landType = document.getElementById("tlandr_category_id").value;
        var buildingValueInput = document.getElementById("tlandc_building_value");

        if (landType == "1" || landType == "7") {
            buildingValueInput.disabled = true;
            buildingValueInput.value = '';
        } else {
            buildingValueInput.disabled = false;
        }
    }

    document.getElementById("tlandr_category_id").addEventListener('change', checkLandType);

    checkLandType();
});

ผลลัพธ์ที่ได้คือ : Function ที่เขียนไว้ใน Javascript ไม่ถูกเรียกใช้ในหน้า html ครับ

[mindphp]

จากโค้ดที่ยกมา รู้ได้อย่างไรว่า ไม่ถูกเรียกใช้

[Buck Kittisak]

จากโค้ดที่ยกมา รู้ได้อย่างไรว่า ไม่ถูกเรียกใช้

ผมลองใช้ฟังก์ชัน CheckLandtype ซึ่งเป็นฟังก์ชันเช็คประเภทที่ดิน หลังจากผมย้ายมาเก็บในไฟล์ Javascript โดยเฉพาะ มันไม่เช็คเงื่อนไขให้ครับ

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

function checkLandType() {
        var landType = document.getElementById("tlandr_category_id").value;
        var buildingValueInput = document.getElementById("tlandc_building_value");

        if (landType == "1" || landType == "7") {
            buildingValueInput.disabled = true;
            buildingValueInput.value = '';
        } else {
            buildingValueInput.disabled = false;
        }
    }

    document.getElementById("tlandr_category_id").addEventListener('change', checkLandType);

    checkLandType();
});

• และยังมีฟังก์ชันอื่นๆเกี่ยวกับโปรแกรมที่ใช้ไม่ได้เลยครับ

[mindphp]

คนอื่นที่จะช่วยดูจะช่วยเช็คยังไง ยกแค่มาตัวอย่างโค้ดตัวอย่าง แต่ไม่ตัวผลมาให้ดู

[Buck Kittisak]

ตรวจสอบการโหลดไฟล์ JavaScript ว่าไฟล์ JavaScript ถูกโหลดอย่างถูกต้องในหน้า HTML หรือไม่ โดยเปิด console ของเบราว์เซอร์
(F12 หรือ Ctrl+Shift+I) และดูว่าเกิด error หรือไม่
และ มีลิงค์ที่ถูกเรียก อะไรบ้าง

[Buck Kittisak]

ตรวจสอบการโหลดไฟล์ JavaScript ว่าไฟล์ JavaScript ถูกโหลดอย่างถูกต้องในหน้า HTML หรือไม่ โดยเปิด console ของเบราว์เซอร์
(F12 หรือ Ctrl+Shift+I) และดูว่าเกิด error หรือไม่
และ มีลิงค์ที่ถูกเรียก อะไรบ้าง

ตอนนี้ลองเช็คจาก Console แล้วครับ ไฟล์ javascript ของผมถูกเรียกใช้ ครับ

js.png (51.41 KiB) Viewed 1958 times

[Buck Kittisak]

ตรวจสอบการโหลดไฟล์ JavaScript ว่าไฟล์ JavaScript ถูกโหลดอย่างถูกต้องในหน้า HTML หรือไม่ โดยเปิด console ของเบราว์เซอร์
(F12 หรือ Ctrl+Shift+I) และดูว่าเกิด error หรือไม่
และ มีลิงค์ที่ถูกเรียก อะไรบ้าง

ตอนนี้ลองเช็คจาก Console แล้วครับ ไฟล์ javascript ของผมถูกเรียกใช้ ครับ
js.png

ตอนนี้ที่สงสัยคือ ไฟล์ถูกเรียกใช้แล้ว แต่ฟังก์ชันที่เขียนไว้ไม่ทำงานเช่น ฟังก์ชัน Resetform ไว้สำหรับล้างค่าในฟอร์ม ไม่ทำงาน และฟังก์ชั่นอื่นๆทั้งหมดไม่ทำงานเลย

[eange08]

- อาจจะลอง clear cache ของตัวโปรแกรมเรา
- ลองเช็คเบื้องต้นว่าเข้าฟังกชั่นการทำงานจริงหรือไม่ด้วยคำสั่ง console.log(); ใส่ในฟังกชั่นที่เราต้องการเช็ค แล้วดูที่ console ของ browser ว่ามีค่าออกมาหรือไม่
เช่น

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

$(".button").click(function(){     
    console.log('example');
    .....
    });    
    

หรือ

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

function submitexample()
{
    console.log('example');
    .....
}

Screenshot 2024-06-08 132628.png (5.38 KiB) Viewed 1947 times

[Buck Kittisak]

- อาจจะลอง clear cache ของตัวโปรแกรมเรา
- ลองเช็คเบื้องต้นว่าเข้าฟังกชั่นการทำงานจริงหรือไม่ด้วยคำสั่ง console.log(); ใส่ในฟังกชั่นที่เราต้องการเช็ค แล้วดูที่ console ของ browser ว่ามีค่าออกมาหรือไม่
เช่น

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

$(".button").click(function(){     
    console.log('example');
    .....
    });    
    

หรือ

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

function submitexample()
{
    console.log('example');
    .....
}

Screenshot 2024-06-08 132628.png

ตอนนี้ผมพอเข้าใจแล้วครับเดี่ยวแก้ได้จะแสดงวิธีครับ

[Buck Kittisak]

การแก้ไข

• ปัญหาเกิดจาก กาาครอบวงเล็บ { } ใส่ฟังก์ชันทั้งหมดซึ่งทำให้ฟังก์ชันไม่ถูกเรียกใช้งาน ฉะนั้นผมเลยแยกและครอบ {} ใหม่ ดังนี้ :

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

function resetForm() {
    document.getElementById("tlandc_username").value = ""; // ล้างค่าชื่อเจ้าของ
    document.getElementById("tlandr_category_id").selectedIndex = 0; // ให้เลือกตัวแรกใน select
    document.getElementById("tlandc_land_value").value = ""; // ล้างค่ามูลค่าที่ดิน
    document.getElementById("tlandc_building_value").value = ""; // ล้างค่ามูลค่าสิ่งปลูกสร้าง
    document.getElementById("save_data_tax").checked = false; // ล้างค่าสวิตช์
}

function formatNumberInput(input) {
    // ลบเครื่องหมายจุลภาคออกก่อนที่จะฟอร์แมตตัวเลข
    let value = input.value.replace(/,/g, '');
    // แปลงค่าเป็นตัวเลขและฟอร์แมตด้วยเครื่องหมายจุลภาค
    input.value = parseFloat(value).toLocaleString('en-US');
}

document.addEventListener('DOMContentLoaded', (event) => {
    // ฟอร์แมตค่าที่กรอกเมื่อโหลดหน้าเว็บ
    document.getElementById('tlandc_land_value').addEventListener('input', function () {
        formatNumberInput(this);
    });

    document.getElementById('tlandc_building_value').addEventListener('input', function () {
        formatNumberInput(this);
    });

    // ลบเครื่องหมายจุลภาคออกก่อนส่งฟอร์ม
    document.querySelector('form').addEventListener('submit', function () {
        let landValueInput = document.getElementById('tlandc_land_value');
        let buildingValueInput = document.getElementById('tlandc_building_value');

        landValueInput.value = landValueInput.value.replace(/,/g, '');
        buildingValueInput.value = buildingValueInput.value.replace(/,/g, '');
    });
});

function checkLandType() {
    var landType = document.getElementById("tlandr_category_id").value;
    var buildingValueInput = document.getElementById("tlandc_building_value");

    if (landType == "1") { // ถ้าเป็นที่ดินรกร้างว่างเปล่า
        buildingValueInput.disabled = true; // disable ช่องฟอร์ม
        buildingValueInput.value = ''; // ล้างค่าของช่องฟอร์ม
    } else if (landType == "7") { // เพิ่มเงื่อนไขเพิ่มเติม
        buildingValueInput.disabled = true; // disable ช่องฟอร์ม
        buildingValueInput.value = ''; // ล้างค่าของช่องฟอร์ม
    } else {
        buildingValueInput.disabled = false; // enable ช่องฟอร์ม
    }
}

// เรียกฟังก์ชันนี้เมื่อโหลดหน้าเพื่อตรวจสอบค่าที่เลือกไว้
document.addEventListener('DOMContentLoaded', (event) => {
    checkLandType();
});


grecaptcha.ready(function () {
    grecaptcha.execute('6Le2T_EpAAAAAPPBAnH-FGKUtS3qQinw0ddSu49X', {
        action: 'contact'
    }).then(function (token) {
        var recaptchaResponse = document.getElementById('recaptchaResponse');
        recaptchaResponse.value = token;
    });
});