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

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

舞台上最多只能有5个圆圈。如果单击“添加”按钮，页面上有五个圆圈，则会弹出一条警报，告知用户不能添加更多圆圈

var circle=document.getElementById（'#div'）；
$（函数（）{
$（“#按钮无”）。在（'单击'，添加项）上；
$（'#buttonTwo'）。在（'click'，removietem'）；
});
函数addItem（）{
如果（圆圈>5）{
警报（“您不能添加超过5个对象”）；
}否则{
文件.正文.附件（div）；
};
}
函数removietem（）{
如果（圆==0）{
警报（“您尚未添加任何内容”）；
}否则{
$（this.remove（）；
};
}​
.circle{
显示：块；
宽度：50px；
高度：50px；
边界半径：50%；
过渡：背景色350ms；
背景颜色：蓝色；
}



函数addItem（）{
变量循环=$（“.circle”）；
如果（圆长度>=5）{
警报（“您不能添加超过5个对象”）；
}否则{
$（''）.addClass（'circle'）。appendTo（$（'#body'）；
};
}
函数removietem（）{
变量循环=$（“.circle”）；
if（circle.length==0）{
警报（“您尚未添加任何内容”）；
}否则{
圈.eq（0）.remove（）；
};
}
$（“#按钮无”）。单击（添加项）；
$（“#按钮两”）。单击（删除项目）
.circle{
背景颜色：蓝色；
显示：块；
高度：50px；
边界半径：50%；
宽度：50px；
过渡：背景色350ms；
}

b1
b2
您的代码中有一些缺陷：

使用
getElementById
时，您应该只给出id名称，而不是
字符
此
不涉及
removietem
函数中的圆，因此不起作用
在正文中附加
circle
变量将创建重复的ID，这是HTML规范所不允许的
（小缺陷）
>5
将允许创建6个圆，因此您应该将其更改为
=5
（只是不需要的代码）绑定按钮上的函数不必位于
$（function（）{}）内，无需安装即可正常工作。为您节省一点代码。：）
我已经在下面为您修复了这些缺陷。因为我注意到您已经在使用jQuery函数，所以我也冒昧地在代码中利用了jQuery。当然，它可以在没有jQuery的情况下实现：


$（'addButton'）。在（'click'，addItem'）；
$（“#removeButton”）。在（'click'，removeItem'）；
函数addItem（）{
变量圆=$（“.circle”）；
如果（圆圈.size（）>=5）{
警报（“您不能添加超过5个对象”）；
}否则{
$（“正文”）。追加（“”）；
};
}
函数removietem（）{
变量圆=$（“.circle”）；
如果（圆的长度==0）{
警报（“您尚未添加任何内容”）；
}否则{
圆圈。最后一个（）。删除（）；
}
}
.circle{
背景颜色：蓝色；
显示：块；
高度：50px；
边界半径：50%；
宽度：50px；
过渡：背景色350ms；
}

加一个圆圈
删除一个圆圈
看起来你的js中缺少了一些东西

getElementbyId函数只需要ID的名称作为参数。所以跳过英镑符号（#）

还有。您正在将“圆”与0进行比较。圆圈是一个ID。为了获得最佳实践，如果多个元素应该使用相同的ID，您应该使用class属性。所以你需要弄清楚如何从变量圈中找出一个数字，以便与另一个数字进行比较