Javascript 如何从文本字段显示用户输入

我有一个带有用户名、密码和验证pin输入的表单。用户输入用户名和密码，然后单击登录，这将取消隐藏一个div，允许他们输入验证pin。在隐藏的div中显示“Hello this account is using a verification pin”，但是我想知道是否有办法让它说“Hello//username that entered//this account is using a verification pin”。我将如何实现这一点

取消隐藏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>

username

显示在隐藏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>

你好！
此帐户当前正在使用验证pin

任何帮助都将不胜感激

这应该可以做到：

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

这应该做到：

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

---

当然有可能。您可以使用DOM。在

showDiv（）函数中

可以使用dom获取输入的用户名。你可以这样做：

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

这段代码应该可以做到

---

希望这有帮助

当然有可能。您可以使用DOM。在

showDiv（）函数中

可以使用dom获取输入的用户名。你可以这样做：

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

这段代码应该可以做到

---

希望这有帮助

这基本上意味着添加到div中的所有内容都是使用jQuery完成的，而不是将其混合，这可能会导致以后的混淆

将

id=“username”

添加到您的输入中

将

id=“modaldiv”

添加到hello div

删除该分区中的所有内容

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

var username=$（“#username”）.val（）；
var divhtml=“你好”+用户名+”！
$（#modaldiv”）.html（divhtml）；

---

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

将

id=“username”

添加到您的输入中

将

id=“modaldiv”

添加到hello div

删除该分区中的所有内容

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

var username=$（“#username”）.val（）；
var divhtml=“你好”+用户名+”！
$（#modaldiv”）.html（divhtml）；

---

下面的代码肯定会让您开始学习。它允许您获取用户在输入框中输入的值，并使用将内容添加到另一个div

var displayUsername=function（）{
var username=document.getElementById（'username'）。值
如果（用户名！=''）{
document.getElementById（'message'）.innerHTML='Hello'+username+'！'
}
}

点击我！

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

var displayUsername=function（）{
var username=document.getElementById（'username'）。值
如果（用户名！=''）{
document.getElementById（'message'）.innerHTML='Hello'+username+'！'
}
}

点击我！

我在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>

你好
此帐户当前正在使用验证pin

然后，我添加了以下javascript：

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

函数showDiv（）{
document.getElementById（“login\u twofactorauth\u message\u entercode\u accountname”）.innerHTML=document.getElementById（“steamAccountName”）.value；
document.getElementById（“feedback”）.style.display='block'；
}

我在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>

你好
此帐户当前正在使用验证pin

然后，我添加了以下javascript：

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

函数showDiv（）{
document.getElementById（“login\u twofactorauth\u message\u entercode\u accountname”）.innerHTML=document.getElementById（“steamAccountName”）.value；
document.getElementById（“feedback”）.style.display='block'；
}

您好，很抱歉问了这个愚蠢的问题，但是我应该把这个代码放在哪里？在与您取消隐藏验证pin div相同的功能块中。您好，很抱歉问了这个愚蠢的问题，但是我应该把这个代码放在哪里？在与您取消隐藏验证pin div相同的功能块中。