为什么我的变量从外部 Javascript 页面返回为未定义？

Question

为什么我的变量从外部 Javascript 页面返回给我们未定义？

所以基本上，我从 php 页面向 javascript 发送变量。 在第 1 页，用户填写表格。

然后将数据传递到第 2 页，从帖子中获取数据并放入 php 变量，然后回显到页面上。

    $name = isset($_POST['first_name']) ? $_POST['first_name'] : "";
    $email = isset($_POST['email']) ? $_POST['email'] : "";
    $company = isset($_POST['company']) ? $_POST['company'] : "";
    $phone = isset($_POST['phone']) ? $_POST['phone'] : "";
    $city = isset($_POST['city']) ? $_POST['city'] : "";
    $state = isset($_POST['state']) ? $_POST['state'] : "";
    $country = isset($_POST['country']) ? $_POST['country'] : "";
    <p id="Name"><?php echo $name ?></p>
    <p id="Email"><?php echo $email ?></p>
    <p id="Company"><?php echo $company ?></p>
    <p id="Phone"><?php echo $phone ?></p>
    <p id="City"><?php echo $city ?></p>
    <p id="State"><?php echo $state ?></p>
    <p id="Country"><?php echo $country ?></p>
<center>
<input class="LeonardButton" type="button" id="calculate" value="Calculate">
</center>

之后，用户点击一个按钮，将这些数据连同他们在第 2 页填写的数据一起发送到 javascript 页面进行处理。

javascript 页面尝试通过 id 获取变量，然后在第一页上将它们提醒给用户以进行测试。

const $ = selector => document.querySelector(selector);

const focusAndSelect = selector => {
    const elem = $(selector);
    elem.focus();
    elem.select();  
};

const processEntries = () => 
{
    let name = document.getElementById("Name").value;
    let email = document.getElementById("Email").value;
    let company = document.getElementById("Company").value;
    let phone = document.getElementById("Phone").value;
    let city = document.getElementById("City").value;
    let state = document.getElementById("State").value;
    let country = document.getElementById("Country").value;
    
    alert("Test Alert");
    alert(name);
    alert(email);
    alert(company);
    alert(phone);
    alert(city);
    alert(state);
    alert(country); 
};

document.addEventListener("DOMContentLoaded", () => {
    $("#calculate").addEventListener("click", processEntries);
});

当我单击计算按钮并运行 javascript 时，它会提醒我“测试警报”，然后是“未定义”、“未定义”、“未定义”、“未定义”、“未定义”、“未定义”、“未定义” .

我知道 php 变量是在此页面上设置和定义的，因为我将它们物理显示在顶部。

编辑#1：我尝试使用 Dzejkob 的解决方案，但变量仍然未定义。 这是我修改的代码和屏幕截图中的结果。

所以我尝试了以下代码：

   let name = document.getElementById("Name").innerText;
    let email = document.getElementById("Email").innerText;
    let company = document.getElementById("Company").innerText;
    let phone = document.getElementById("Phone").innerText;
    let city = document.getElementById("City").innerText;
    let state = document.getElementById("State").innerText;
    let country = document.getElementById("Country").innerText;

和

    let name = document.getElementById("Name").innerHTML;
let email = document.getElementById("Email").innerHTML;
let company = document.getElementById("Company").innerHTML;
let phone = document.getElementById("Phone").innerHTML;
let city = document.getElementById("City").innerHTML;
let state = document.getElementById("State").innerHTML;
let country = document.getElementById("Country").innerHTML;

但结果是一样的：

编辑#2：Dzejkob 建议的答案有效。 显然，我在缓存中提取了错误的文件。 Ivar 建议我检查控制台，我做到了，然后我看到它给了我旧代码。

谢谢你们的帮助！

Answer 1

您需要使用 document.getElementById("Name").innerHTML 或 .innerText 而不是 .value ，这是文本字段而不是段落的属性。