壊れたJavascriptコード

私は3つのことが起こるウェブサイトを作成しようとしていますが、私は立ち往生しています。壊れたJavascriptコード

（1）ボタン「追加」ボタンをクリックすると、新しい段落が作成され、出力に追加されます。段落の内容は、[ADD]ボタンの下にあるテキスト領域から来る必要があります。

（2）「削除」ボタンを押すと、divの最初の段落を削除する必要があります。

（3）ユーザーが何の段落がない場合、削除言う「警告」を作成しようとした場合：『いいえ段落を削除する』を

私はdiv要素の中に各段落を置くために私のJSを持って、私はそれを削除するかどうかは本当にわからないんだけど...任意の助けもいただければ幸いです。

window.onload = function() { 
 
    var button = document.getElementById("add"); 
 
    button.onclick = insertItem; 
 
} 
 

 
function insertItem() { 
 
    var added = document.getElementById("output"); 
 
    var textToAdd = document.getElementById("input"); 
 
    if (textToAdd.value != "") { 
 
    var newp = document.createElement("p"); 
 
    newp.innerHTML = textToAdd.value; 
 
    added.appendChild(newp); 
 
    } 
 
} 
 

 
var deletebutton = document.getElementsByTagName("delete"); 
 
deletebutton.onclick = deleteItem; 
 

 
function deleteItem() { 
 
    var output = document.getElementById("output"); 
 
    var pars = output.getElementsByTagName("p"); 
 
    if (pars.length > 0) { 
 
    output.removeChild(pars[0]); 
 
    } 
 
}

#output { 
 
    border: blue 5px solid; 
 
    padding: 10px; 
 
    margin-bottom: 10px; 
 
    margin-top: 10px; 
 
    width: 50%; 
 
} 
 

 
#output p { 
 
    padding: 10px; 
 
    border: black 1px dashed; 
 
}

<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js" type="text/javascript"></script> 
 
    <script src="task3.js"></script> 
 
</head> 
 

 
<body> 
 
    <h2> TASK 3 - Creating, Appending and Deleting Nodes in the DOM Tree </h2> 
 
    <p> Type in text below, click add to add as paragraph. <button id="add"> Add </button> </p> 
 
    <textarea id="input" rows="10" cols="60"> 
 
    </textarea><br> 
 
    <button id="delete">Delete Last Paragraph</button> 
 
    <br><br> 
 
    <h2> Added Paragraphs </h2> 
 
    <div id="output"> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2017-11-14 Daniel Palmieri

チェックを使用すると、削除ボタンをあなたの参照を取得していますか。 –

質問をしないでください。 –

あなたがフェッチしています削除ボタンが間違っています。 idではなくgetElementsByTagNameを使用しています。
削除すると、出力に含まれていないマークアップ内の最初の<p>が削除される可能性があります。この問題を解決するには、単にあなたのoutput div要素のすべての子を取得し、最初のものを削除できます。
```
function deleteItem() { 
    let output = document.getElementById('output') 
    if (output.hasChildNodes()) { 
     let outputs = output.childNodes 
     outputs[0].remove() 
    } 
} 
```

出典

2017-11-14 23:43:15 ThatBrianDude

答えて

関連する問題