ユーザー入力に基づいて段落を作成する

ユーザーの入力を取り込み、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); 
}

出典

2011-08-02 ProgrammingNewb

userPar.innerHTML = par;

あなたのコードで

userPar.innerHTML = parNew;

出典

2011-08-02 23:42:34

さらに多くの問題があります。たとえば、 'document.getElementById（" addheading "）。onclick'は' heading'を参照する必要があります。 – Shi

次のようになります。

それは前にチェックするために、要素が存在しないこと（多分そう）可能な限り最高である

> 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は、多くの意味がありません、あなたは彼らが表現するデータまたは関数の後にそれらに名前を付けることを望むかもしれません。

出典

2011-08-03 00:48:06 RobG

ユーザー入力に基づいて段落を作成する

答えて

関連する問題