如何使用JavaScript切换SVG循环

我的JavaScript代码有问题

我想在单击按钮时显示和隐藏两个SVG圆圈

我检查控制台时似乎没有任何错误，但按钮似乎不起作用

这是按钮的代码，我将按钮id设置为“strike_btn”， SVG圆的id为“strike”

代码：

onload=function（）{
函数changeStr（）{
var strike=document.getElementById（'strike'）；
如果（strike.style.display==='block'）{
strike.style.display=“无”；
}
}
var strbutton=document.getElementById（'strike_btn'）；
strbutton.addEventListener（'click'，changeStr）；
}

罢工

strike的显示属性可能不是“块”。检查开发工具中的“计算显示”属性，或将该行更改为：

if (strike.style.display !== 'none') {

---

您需要使用block

style=“display:block；”“

添加一个

style

属性，以使其起作用（更改了代码段的x坐标，因为圆超出了窗口边界）

window.onload=function（）{
函数changeStr（）{
var strike=document.getElementById（'strike'）；
如果（strike.style.display==='block'）{
strick.style.display=“无”；
}
}
var strbutton=document.getElementById（'strike_btn'）；
strbutton.addEventListener（'click'，changeStr）；
};

罢工
也许您需要添加第二个条件

if (strike.style.display === 'none') {
    strike.style.display = "block";  
}

或者像这样的一个例子：

if (strike.style.display === 'block') {
    strike.style.display = "none";
} else {
    strike.style.display = "block";
}

首先，在画布上根本看不到圆圈

其次，除非设置初始值，否则不会设置初始值


var删除1，删除2；
函数changeStr（）{
删除1.style.display=删除1.style.display==“无”？“块”：“无”；
strike2.style.display=strike2.style.display==“无”？“块”：“无”；
}
addEventListener（“加载”，函数（）{
strike1=document.getElementById（'strike1'）；
strike2=document.getElementById（'strike2'）；
删除1.style.display=“无”；
删除2.style.display=“无”；
document.getElementById（'strike_btn'）。addEventListener（'click'，changeStr）；
})

罢工
圆圈#罢工

元素没有

显示

属性集。我想这就是为什么你的支票没有通过？因为最初的值是“”，这意味着用户必须单击两次，以便在开始时将其设置为“无”！当圆圈在矩形框外时，我可以看到按钮不起作用