Question

我遇到了麻烦，抓住用户输入，让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);
}

Answer 1

userPar.innerHTML = par;

应该是

userPar.innerHTML = parNew;

Answer 2

在您的代码中：

> 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没有多大意义，您可能希望在它们代表的数据或函数之后命名它们。

Answer 3

我做到了，而且奏效了。


   <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>```

根据用户输入创建段落

3 个答案: