我正在嘗試創建兩個按鈕：一個在網頁上添加一個圓圈，另一個刪除一個圓圈

Question

我正在嘗試創建兩個按鈕：一個在網頁上添加一個圓圈，一個刪除一個圓圈。

舞台上最多只能有5個圓圈。 如果單擊添加按鈕，並且頁面上有五個圓圈，則會彈出警報，告訴用戶不能再添加任何圓圈。

 var circle = document.getElementById('#div'); $(function() { $('#buttonOne').on('click', addItem); $('#buttonTwo').on('click', removeItem); }); function addItem(){ if (circle > 5) { alert('You cannot add more than 5 objects'); } else { document.body.appendChild(div); }; } function removeItem(){ if (circle== 0) { alert('You have not added anything yet'); } else { $(this).remove(); }; }​ 

 .circle { display: block; width: 50px; height: 50px; border-radius: 50%; transition: background-color 350ms; background-color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="button" value="Add Circle" id="buttonOne"/> <input type="button" value="Delete Circle" id="buttonTwo"/> <div class="circle"></div> <p></p> <script src="week4.js" type="text/javascript"></script> 

Answer 1

您的代碼中存在一些缺陷：

1. 使用getElementById ，應僅提供id名稱，而不是#字符。
2. this不是在removeItem函數中指的是一個圓圈，因此將不起作用。
3. 將circle變量附加到主體將創建重復的ID，這是HTML規范所不允許的。
4. （次要缺陷） > 5將允許創建6個圓，因此應將其更改為>= 5 。
5. （僅是不需要的代碼）將按鈕上的功能綁定到$(function(){}); ，沒有它也可以正常工作。 為您節省一些代碼。 :)

我已在下面為您修復了這些缺陷。 由於我注意到您已經在使用jQuery函數，因此我在代碼中也充分利用了jQuery。 當然，也可以不使用jQuery來實現。 :)

 $('#addButton').on('click', addItem); $('#removeButton').on('click', removeItem); function addItem() { var circles = $(".circle"); if (circles.size() >= 5) { alert('You cannot add more than 5 objects'); } else { $("body").append("<div class='circle'></div>"); }; } function removeItem() { var circles = $(".circle"); if (circles.length == 0) { alert('You have not added anything yet'); } else { circles.last().remove(); } } 

 .circle { background-color: blue; display: block; height: 50px; border-radius: 50%; width: 50px; transition: background-color 350ms; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button" id="addButton">Add a circle</button> <button type="button" id="removeButton">Remove a circle</button> 

JSFiddle

Answer 2

 function addItem() { var circle = $(".circle"); if(circle.length >= 5) { alert('You cannot add more than 5 objects'); } else { $('<div/>').addClass('circle').appendTo($('#body')); }; } function removeItem() { var circle = $(".circle"); if(circle.length == 0) { alert('You have not added anything yet'); } else { circle.eq(0).remove(); }; } $('#buttonOne').click(addItem); $('#buttonTwo').click(removeItem); 

 .circle { background-color: blue; display: block; height: 50px; border-radius: 50%; width: 50px; transition: background-color 350ms; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <button id="buttonOne">b1</button> <button id="buttonTwo">b2</button> <div id="body"></div> 

Answer 3

好像您在js中缺少一些東西。

getElementbyId函數僅需要ID的名稱作為參數。 因此，跳過井號（＃）。

也。 您正在將“圓”與0進行比較。圓是ID。 為了獲得最佳實踐，如果多個元素應使用相同的ID，則應改用class屬性。 因此，您需要弄清楚如何從可變圓中找出一個數字，以便將其與另一個數字進行比較。