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

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

使用getElementById时，您应该只提供ID名称，而不是#字符。
this未引用removeItem函数中的圆圈，因此无法工作。
将circle个变量附加到正文会产生重复的ID，这是HTML规范所不允许的。
（次要缺陷）> 5将允许创建6个圈子，因此您应将其更改为>= 5。
（只是不需要的代码）绑定按钮上的函数不必在$(function(){});内，它没有正常工作。为您节省一些代码。：）

我已在下面为你解决了这些缺陷。因为我注意到你已经使用了jQuery函数，所以我也可以在代码中利用jQuery。它当然可以在没有jQuery的情况下实现。：）

＆＃13;

$('#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();
    }
}

＆＃13;

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

＆＃13;

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

＆＃13;

JSFiddle

Answer 2

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

好像你错过了js中的一些东西。

getElementbyId函数只需要ID的名称作为参数。所以跳过井号（＃）。

另外。你正在比较＆＃34; circle＆＃34;到0.圆是一个ID。对于最佳实践，如果多个元素应使用相同的ID，则应使用class属性。所以你需要弄清楚如何从变量圆中取出一个数字，以便将它与另一个数字进行比较。

我正在尝试创建两个按钮：一个用于向网页添加圆圈，另一个用于删除圆圈

3 个答案: