如何顯示來自文本字段的用戶輸入

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>