將 HTML 表單輸入設置為 JS 變量

Question

我想將用戶輸入讀回給他們的表單，在他們發送之前進行確認。我在頁面上有一些帶有相應 ID 的文本元素。 我認為我只需要將變量設置為等於輸入字段的值，但是當 function 運行時它只返回空白。

我有一個 function 將變量設置為該表單輸入的.value ，但我可能會掛斷的是輸入字段上沒有默認值，我認為該值是在用戶輸入后設置的.

示例用戶在字段中輸入“John Doe”不應該將該字段的值更改為“John Doe”嗎？

var Phone;

document.getElementById('confirm-details').onclick = ConfirmDetails()

function ConfirmDetails() {
    // Set variable to form input
    Phone = document.getElementById("InputPhone").value;
    // Change text element to variable
    document.getElementById("BookingPhone").innerHTML = Phone;
};

也許我只是對.value屬性感到困惑，但我認為輸入字段上的值應該是用戶輸入的值。

Answer 1

這一行

document.getElementById('confirm-details').onclick = ConfirmDetails()

應該

document.getElementById('confirm-details').onclick = ConfirmDetails

您不希望document.getElementById('confirm-details').onclick引用 function ConfirmDetails的結果（此處為 void），而是 ZC1C425268E68384D1AB4Z5074 本身。

Answer 2

而不是 using.value，您需要使用.innerText

Phone = document.getElementById("InputPhone").innerText;

Answer 3

object.oninput = function(){
    ConfirmDetails();
};

或者，速記：

object.oninput = function(){ConfirmDetails()};

您還應該使用document.getElementById().innerHTML()來獲取文本

Answer 4

這對我來說很好。 我感謝所有的答案！

<script>
document.getElementById("confirm-details").addEventListener("click", function(){
document.getElementById("BookingName").innerHTML = document.getElementById("InputName").value;
document.getElementById("BookingEmail").innerHTML = document.getElementById("InputEmail").value;
document.getElementById("BookingPhone").innerHTML = document.getElementById("InputPhone").value;
document.getElementById("InputDay").innerHTML = document.getElementById("BookingDay").value;
document.getElementById("InputTime").innerHTML = document.getElementById("BookingTime").value;
document.getElementById("InputService").innerHTML = document.getElementById("BookingService").value;
document.getElementById("InputExtra").innerHTML = document.getElementById("BookingExtra").value;
});

</script>

Answer 5

以下是我相信您正在努力實現的目標：

 function confirmDetails() { // Set variable to form input var phone = document.getElementById("inputPhone").value; var confirmMsg = 'is ' + phone + ' correct?' + '<br> <input type="button" value="Yes" onclick="confirmed()"> '; // Change text element to variable document.getElementById("bookingPhone").innerHTML = confirmMsg; }; function confirmed(){ alert('confirmed'); }

 <input id="inputPhone" type="text" placeholder="input here"> <input type="button" onclick="confirmDetails()" value="Submit"> <br> <span id="bookingPhone"></span>

單擊該按鈕時，它將運行 function confirmDetails並將變量phone設置為用戶的輸入。 我將變量confirmMsg設置為回讀用戶輸入的確認消息。 我使用了一個具有唯一 ID 的跨度並將變量confirmMsg發送給它。

如果您在其他地方需要它，我將確認消息放入一個變量中以使其更加通用。