我想創建兩個按鈕：一個向網頁添加一個圓，一個刪除一個圓

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

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 2

有代碼中的一些缺陷：

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 3

好像你缺少你的js的一些東西。

getElementbyId函數只需要ID的名稱作爲參數。所以，跳過英鎊符號（＃）。

另外。您正在比較「圈子」爲0.圓圈是一個ID。而對於最佳實踐，如果幾個元素應該使用相同的ID，則應該使用class屬性。所以你需要弄清楚如何從變量圈出來一個數字，以便將它與另一個數字進行比較。