Question

我想将用户输入的内容读回给他们，在他们发送之前先进行确认。我在页面上有一些文本元素及其相应的ID。我想我只需要将变量设置为等于输入字段的值，但是当函数运行时，它只会返回空白。

我有一个将变量设置为表单输入的.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引用函数ConfirmDetails的结果（此处为空），而是引用函数本身。

Answer 2

您需要使用.innerText

，而不是使用.value。

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>

单击按钮后，它将运行功能confirmDetails并将变量phone设置为用户输入。我将变量confirmMsg设置为确认消息，该消息将回读用户的输入。我使用了具有唯一ID的范围，并将变量confirmMsg发送给了它。

如果您在其他地方需要确认消息，我会将确认消息放入变量中，以使其更具通用性。

将HTML表单输入设置为JS变量

5 个答案: