时间戳

首页 > 解决方案 > 显示输入的名称？

javascript - 显示输入的名称？

问题描述

我正在学习 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>

标签： javascriptjqueryhtml

解决方案

我们可以进行一些调整并使其正常工作。常见的方法是向您的按钮添加一个单击事件侦听器，一旦单击该事件侦听器就会触发一个函数。

让我们将它添加到您的按钮：onclick="displayName()，注意我正在用 camelCase 编写函数。这是 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>

推荐阅读