為什么我的變量從外部 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 ，這是文本字段而不是段落的屬性。