jQuery 的新手 - 无法找出为什么 AJAX 脚本在一个页面上工作正常，但在另一个页面上却不行

Question

我是 jQuery 的新手，所以我怀疑我遗漏了一些简单的东西。我有两个页面，都使用相同的脚本。

这里是：

$(document).ready(function() {;
    var url = document.getElementById("page_url");
    url.value = location.href;


    $('#my-form-button').on('click', function() {
        var url = $('#page_url').val();
        var phone_number= $('#phone_number').val();
        var email_id= $('#email_id').val();
        var message= $('#message').val();
        var title = $('title').text();

        //send to formspree via ajax
        $.ajax({
            url:'https://formspree.io/f/xpzezajg',
            method:'POST',
            data:{            
                email: email_id,
                phone: phone_number,
                message: message,
                url: url,
                title: title,
            },
            dataType:"json",
            success:function() {
                alert('your mail has been sent!');               
            }   

        });     

    });

});

所以它真正做的就是发送一个 AJAX 表格，开始时有一小部分记录 URL 也通过 AJAX 发送。它在页面上工作正常： https://store.melrosemac.com/iodyne-pro -data-48tb-details.html

但是在另一个页面上，它在控制台中抛出这样的错误：

Uncaught TypeError: Cannot set properties of null (setting 'value')
    at HTMLDocument.<anonymous> (mac-studio-m1-max-10-core-cpu-24-core-gpu-32gb-512ssd-details.html:1333:19)
    at c (jquery-1.10.2.min.js:4:26036)
    at Object.fireWith [as resolveWith] (jquery-1.10.2.min.js:4:26840)
    at Function.ready (jquery-1.10.2.min.js:4:3305)
    at HTMLDocument.q (jquery-1.10.2.min.js:4:717)

过去，当我尝试在 DOM 加载之前加载脚本（例如将其放在头部）或在 jQuery 加载之前，或者如果使用了错误版本的 jQuery 时，我已经看到了这些问题。 但是这个脚本就在</body>的正上方，就像在其他页面上一样，它使用相同的 jQuery 文件 (1.1.0)，即使页面上加载了另一个版本的 jQuery（就像其他页面一样）。

需要明确的是，这个 AJAX 表单似乎仍然有效，但存储页面 URL 和名为“url”和“title”的 vars 中的标题的部分似乎是导致问题的原因。

我对此感到困惑，我希望脚本会以相同的方式执行，尤其是像这样的非常简单的部分。 什么会导致这个？

Answer 1

错误告诉您 1333 代码行发生了某些事情。 当您将调试器放在那里时，它会显示您的document.getElementById("page_url")正在返回 null，因此您无法设置它的值。

要点：您的网页没有带有 id page_url的元素