从文本框中获取文本并将其显示在段落中

Get text from text box and display it in a paragraph

本文关键字：显示 段落中 取文本 文本 获取      更新时间：2024-06-25

如果我们有一个包含名称、姓氏和按钮的表（提交）

例如：

   <html>
   <body>
      <table> 
          <tr>
             <td> 
                <label>First name: </label>
             </td>
             <td> 
                <input type="text" id="name" name="firstname" required  />
             </td>
             <td> 
               <label>Last name: </label>
             </td>
             <td> 
               <input type="text" id="lastname" name="lastname" required  />
             </td>
             <td> 
                <button type="submit" onclick="funct()">Submit</button>
             </td>
          </tr>
       </table> 
      <p id="mane1"> </p>
    </body>
  </html>

当我们点击提交时，我们希望在一个新的段落中显示我们从文本框中获得的文本：

您的名字是：RandomName

您的姓氏是：RandomSuname

我们该怎么做？

我试过这个：

function funct(){
 var name=document.getElementById("name").value;
 if (name!=""){
    document.getElementById("name1").innerHTML="Your Name Is:"+ name;
}
}

问题是，如果我点击"提交"，它不会显示任何内容。

我试着在互联网上找到有用的东西，但我用的所有例子都无济于事。

如果有任何帮助，我将不胜感激：）

将p id更改为"name1"后，您发布的代码运行良好。你确定问题不在代码的其他地方吗？

我注意到你的按钮是一个提交类型。它在表格中吗？如果是这样的话，那么你的浏览器可能会提交表单并重新加载页面，速度太快以至于你看不到javascript实际工作。您可以将按钮类型更改为"按钮"以阻止表单提交。

"name1"与"mane1"是拼写错误吗？如果这是一个拼写错误，并且在代码中你是对的，那么尝试使用.innerText或在.innerHtml字符串中放置html标记。

function funct(){
   var name=document.getElementById("name").value;
   if (name!=""){
      // document.getElementById("name1").innerHTML="Your Name Is:"+ name;
      document.getElementById("mane1").innerHTML="<p>Your Name Is:"+ name + "</p>";
   }
}

编辑：进一步考虑

你的脚本是吗

function funct(){
   var name=document.getElementById("name").value;
   if (name!=""){
      document.getElementById("mane1").innerHTML="<p>Your Name Is:"+ name + "</p>";
   }
}

在你调用脚本之后。在页面上从上到下？

<button type="submit" onclick="funct()">Submit</button>

如果不是，那么dom可能还不知道funct（）是什么。换句话说，确保你的脚本在底部，或者被页面内容上比你试图使用它的地方更高的东西激活。

相关文章：