根据用户输入创建段落

Creating paragraphs based on user input

本文关键字：创建 段落 输入 用户      更新时间：2023-09-26

我遇到了麻烦，抓取用户输入，并让onclick操作符在每次单击时创建额外的段落。

这是我的HTML代码

    <!DOCTYPE html>
    <html lang='en'>
    <head>
    <title>Add Paragraph </title>
    <meta charset='utf-8' >
    <script src="../js/addPara.js" type="text/javascript"></script>
    </head>  
    <body>
    <div>
    <input type='text' id='userParagraph' size='20'>
    </div>
    <div id="par">
    <button id='heading'> Add your paragraph</button> 
    </div>
    </body>
    </html>
Here is Javascript code: 
window.onload = function() {
  document.getElementById("addheading").onclick = pCreate;
};
    function pCreate() {
      var userPar= document.createElement("p");
      var parNew = document.getElementById('userParagraph').value;
      userPar.innerHTML = par;
      var area = document.getElementById("par");
      area.appendChild(userPar);
}

userPar.innerHTML = par;
应该

userPar.innerHTML = parNew;

在你的代码中:

> window.onload = function() {  
>   document.getElementById("addheading").onclick = pCreate;
> };

如果元素可能不存在，最好在调用方法之前进行检查:

    var addButton = document.getElementById("addheading");
    if (addButton) {
      addButton.onclick = pCreate;
    }

也没有id为"addheading"的元素，但有一个id为"heading"的按钮。

> function pCreate() {
>   var userPar= document.createElement("p"); 
>   var parNew = document.getElementById('userParagraph').value;  
>   userPar.innerHTML = par;

我想你是说:

    userPar.innerHTML = parNew;

如果您不希望用户在您的页面中插入随机的HTML(也许您希望)，您可以将输入视为文本:

    userPar.appendChild(document.createTextNode(parNew));

. 

>   var area = document.getElementById("par"); 
>   area.appendChild(userPar);
> }

您的变量名和元素id没有多大意义，您可能希望以它们所代表的数据或函数来命名它们。

我照做了，而且成功了。


   <html lang='en'>
   <head>
   <title>Add Paragraph </title>
   <meta charset='utf-8' >
   <script>
    window.onload = function() {
  document.getElementById("heading").onclick = pCreate;
}
    function pCreate() {
      var userPar= document.createElement("p");
      var parNew = document.getElementById('userParagraph').value;
      userPar.innerHTML = parNew;
      var area = document.getElementById("par");
      area.appendChild(userPar);
}
   </script>
   </head>
   <body>
   <div>
   <input type='text' id='userParagraph' size='20'>
   </div>
   <div id="par">
   <button id='heading'> Add your paragraph</button>
   </div>
   </body>
   </html>```
相关文章：