如何显示来自文本字段的用户输入

Question

我有一个包含用户名，密码和验证码输入的表格。 用户输入用户名和密码，然后单击登录，这将取消隐藏div，从而允许他们输入验证码。 在隐藏的div中，它显示“您好，此帐户正在使用验证码”，但是我想知道是否有一种方法可以使它说“您好//输入的用户名//此帐户正在使用验证码”销'。 我将如何实现？

取消隐藏div的按钮

<input class="btn_green_white_innerfade btn_medium" type="button" 
name="submit" id="userLogin" value="Sign in" width="104" height="25" 
border="0" tabindex="5" onclick="showDiv()">

用户输入用户名的字段。

<label for="userAccountName">username</label><br>
<input class="textField" type="text" name="username" 
id="steamAccountName" maxlength="64" tabindex="1" value=""><br>&nbsp;<br>

隐藏的div中显示的消息

<div class="auth_modal_h1">Hello <span 
id="login_twofactorauth_message_entercode_accountname"></span>!</div>
<p>This account is currently using a verification pin.</p>
        </div>

任何帮助将不胜感激

Answer 1

应该这样做：

var username = document.getElementById("steamAccountName").value
document.getElementById("login_twofactorauth_message_entercode_accountname").innerText = username

Answer 2

当然可以。 您可以使用DOM。 在showDiv() function您可以使用dom获取输入的用户名。 您可以执行以下操作：

function showDiv() {
    const username = document.getElementById("userLogin");
    const div = getElementById("login_twofactorauth_message_entercode_accountname")
    div.getElementsByTagName("p").innerText = "Hy " + username + ", welcome...";
}

这段代码应该可以解决问题！

希望有帮助！

Answer 3

这基本上意味着您添加到div的所有内容都是使用jQuery完成的，而不是将其混合在一起的，这可能会在以后引起混乱。

1. 将id="username"添加到您的输入中。
2. 将id="modaldiv"添加到您的hello div

3. 删除该div中的所有内容。

    var username = $("#username").val(); var divhtml = "Hello " + username + " <span id='login_twofactorauth_message_entercode_accountname'></span>! $("#modaldiv").html(divhtml); 

Answer 4

以下代码一定会让您入门。 它允许您使用.value获取用户在输入框中输入的值，并使用.innerHTML将内容添加到另一个div中。

 var displayUsername = function() { var username = document.getElementById('username').value if(username != '') { document.getElementById('message').innerHTML = 'Hello '+username+'!' } } 

 <input type="text" name="username" id="username"> <button class="clickMe" onclick="displayUsername()">Click ME!</button> <div id="message"></div> 

Answer 5

我在您的html中添加了id =“ feedback”：

<div id="feedback" class="auth_modal_h1" style="display:none;">
    Hello <span id="login_twofactorauth_message_entercode_accountname"></span>!
    <p>This account is currently using a verification pin.</p>
</div>

然后，我添加了以下javascript：

<script>
    function showDiv() {
        document.getElementById("login_twofactorauth_message_entercode_accountname").innerHTML = document.getElementById("steamAccountName").value;
        document.getElementById("feedback").style.display = 'block';
    }
</script>