顯示輸入的名稱？

Question

我正在學習 JavaScript/HTML，我需要幫助調整 JS 腳本功能，以便當用戶單擊“提交”時，它會顯示用戶輸入的名稱。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Names</title>
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <script type="text/javascript" rel="script" src="js/scripts.js" defer></script>
</head>
<body>

  <label for="name">Your Name:</label>
  <input id="name" name="name" type="text"/> 

  <input id="submit-button" name="submit-button" type="submit" value="Submit"/>

  <h3>Result</h3>
  <div id="output">
            Form not submitted yet.
  </div>

<script>

function DisplayName(){
  document.getElementById('submit-btn').innerHTML = 
  document.getElementById("name").value;
  }
  console.log("Your name is: " + name);

</script>

</body>
</html>

Answer 1

我們可以進行一些調整並使其正常工作。 常見的方法是向您的按鈕添加一個單擊事件偵聽器，單擊該偵聽器后將觸發一個函數。

讓我們將它添加到您的按鈕中： onclick="displayName() ，注意我正在使用駝峰命名法編寫函數。這是 js 函數的一個很好的做法。這是您的按鈕現在的外觀：

<input id="submit-button" name="submit-button" type="submit" value="Submit" onclick="displayName()"/>

接下來讓我們來做 javascript。 我們可以將其全部保存在一個簡單的函數中，即displayName()函數。

function displayName(){
    var name= document.getElementById("name").value;
    console.log('Your name is: ' + name);  
}

首先，它獲取“名稱”ID 的值，然后將其記錄到控制台。

如果您想稍微增強一下，您還可以對 js 進行一些調整，以在您創建的輸出id標簽中顯示名稱。 這是您的最終作品的外觀。

 function showName(){ var name= document.getElementById("name").value; document.getElementById("output").innerText = name; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Names</title> <link type="text/css" rel="stylesheet" href="css/style.css" /> <script type="text/javascript" rel="script" src="js/scripts.js" defer></script> </head> <body> <label for="name">Your name: </label> <input type="text" id="name" name="name"> <input id="submit-button" name="submit-button" type="submit" value="Submit" onclick="showName()" /> <h3>Result</h3> <div id="output"> Form not submitted yet. </div> </body> </html>

顯示輸入的名稱？

問題描述

1 個解決方案

解決方案1
0 2020-03-17 19:35:21

顯示輸入的名稱？

問題描述

1 個解決方案

解決方案1 0 2020-03-17 19:35:21

解決方案1
0 2020-03-17 19:35:21