“破坏的javascript”；显示：无“；结合一些SVG。不知道从哪里开始

我在一个编码项目上遇到了一些麻烦，我的js技能有些生疏。我卡住了，需要一些帮助

我正在构建一个html页面，其中嵌入了从Illustrator导出的svg。我使用JS使图像在单击时消失，再次单击时重新出现

我的问题是，我单击下面由SVG/HTML生成的六边形，所有内容都消失了，我无法让任何内容重新出现。理想情况下，单击蓝色六边形的位置将重新显示所有内容

我希望Javascript与我在图形的其他部分中使用的Javascript保持一致，其他一切都可以完美地工作。我想我需要更改HTML中的某些内容

下面是我正在使用的Javascript：

function changeItem(element){
    var element  = document.getElementById(element).children;

    if(element[0].style.display == 'none'){
        for (var i = 0; i < element.length - 1; i++) {
             element[i].style.display = ''
  }
    }else{
        for (var i = 0; i < element.length - 1; i++) {
    element[i].style.display = 'none'
  }
    }
}

功能变更项（元素）{
var element=document.getElementById（element）.children；
if（元素[0].style.display==“无”）{
对于（var i=0；i

HTML有点长--很抱歉外部链接：。 javascript函数在第256行被调用

关于如何更改html以使其正常工作，有什么想法吗

---

非常感谢你的帮助

对于具有

display:none

的元素，不会触发单击事件

相反，您可以将不透明度切换为0

下面剪掉的图片中的演示

另外，非常低的不透明度（例如0.03）可能是0的一个很好的替代品，因为六边形的轮廓将保持可见，提示用户关于可点击的表面

功能变更项（元素）{
var element=document.getElementById（element）.children；
if（元素[0].style.opacity==0）{
对于（var i=0；i

.cls-1{
隔离：隔离；
}
.cls-2{
填充：#3ab694；
}
.cls-3{
字体大小：22.22px；
}
.cls-10、.cls-3{
填充：蓝色；
}
.cls-3、.cls-35、.cls-42{
字体系列：Grold-Medium，Grold；
字号：500；
}
.cls-4{
字母间距：-0.01em；
}
.cls-5{
字母间距：0em；
}
.cls-6{
字母间距：-0.07em；
}
.cls-7{
字母间距：-0.01em；
}
.cls-8{
字母间距：-0.01em；
}
.cls-9{
填充：#62c08c；
}
.cls-15、.cls-29、.cls-33、.cls-9{
不透明度：0.5；
}
.cls-15、.cls-20、.cls-26、.cls-29、.cls-33、.cls-9{
混合模式：倍增；
}
.cls-11、.cls-16、.cls-21、.cls-27、.cls-30、.cls-34{
不透明度：0.15；
混合模式：叠加；
}
.cls-11{
填充：url（#白色#黑色#2）；
}
.cls-12{
填充：#0bb1d2；
}
.cls-13{
字母间距：-0.01em；
}
.cls-14{
字母间距：-0.03em；
}
.cls-15{
填充：#2fb2cb；
}
.cls-16{
填充：url（#白色#黑色#2-2）；
}
.cls-17{
填充：#223f70；
}
.cls-18{
字母间距：-0.01em；
}
.cls-19{
字母间距：-0.02em；
}
.cls-20{
填充：#0d70a6；
}
.cls-20、.cls-26{
不透明度：0.45；
}
.cls-21{
填充：url（#白色#黑色#2-3）；
}
.cls-22{
填充：#226869；
}
.cls-23{
字母间距：-0.02em；
}
.cls-24{
字母间距：0em；
}
.cls-25{
字母间距：-0.01em；
}
.cls-26{
填充：#ac2752；
}
.cls-27{
填充：url（#白色#黑色#2-4）；
}
.cls-28{
填充：eca825；
}
.cls-29{
填充：#e8584b；
}
.cls-30{
填充：url（#白色#黑色#2-5）；
}
.cls-31{
填充：543a71；
}
.cls-32{
字母间距：-0.03em；
}
.cls-33{
填充物：#fec24e；
}
.cls-34{
填充：url（#白色#黑色#2-6）；
}
.cls-35{
字号：36.1px；
}
.cls-35、.cls-42{
填充：231f20；
}
.cls-36{
字母间距：-0.05em；
}
.cls-37{
字母间距：-0.09em；
}
.cls-38{
字母间距：-0.1米；
}
.cls-39{
字母间距：-0.02em；
}
.cls-40{
字母间距：-0.01em；
}
.cls-41{
填充：#100b0b；
}
.cls-42{
字体大小：16.66px；
}
.cls-43{
字母间距：-0.01em；
}
.cls-44{
字母间距：-0.01em；
}
.cls-45{
字母间距：-0.01em；
}
.cls-46{
字母间距：0em；
}
.cls-47{
字母间距：0.02em；
}
.cls-48{
字母间距：-0.02em；
}
.cls-49{
字母间距：0em；
}
.cls-50{
字母间距：0em；
}
.cls-51{
字母间距：0.02em；
}

创新360度
运营成功的宏观视角：旨在实现清晰、低风险、一致执行的方法