Question

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

例如：

   <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

您的姓氏是：RandomSurname

我们怎么做？

我试过了：

function funct(){

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

问题是如果我点击＆＃34;提交＆＃34;它没有显示任何东西。

我试图通过互联网找到有用的东西，但我使用的所有例子都没有做任何事情。

我将不胜感激任何帮助:)

Answer 1

＆＃34; name1＆＃34;与＆＃34; mane1＆＃34;一个错字？如果这是一个拼写错误，并且在代码中你是正确的，那么尝试使用.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（）是什么。换句话说，请确保您的脚本位于底部，或者通过页面内容中的某些内容激活，而不是尝试使用它。

Answer 2

将p id更改为＆＃34; name1＆＃34;后，您发布的代码运行正常。您确定问题不在代码中的其他位置吗？

我注意到您的按钮是提交类型。它是一种形式吗？如果是，那么您的浏览器可能正在提交表单并重新加载页面，以至于您没有看到javascript实际正在运行。您可以将按钮类型更改为＆＃34;按钮＆＃34;防止表单提交。

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

2 个答案: