Javascript 使用单选按钮显示div

为了减少代码行数，我将代码简化为显示三个div。我想要的是显示一个特定的div，同时根据选中的单选按钮隐藏另外两个div

我实际上是在关注这两个链接

在第二个链接中，建议使用

radios[i].type === 'radio' && radios[i].checked

为了考试

不过我把它改成了

DisplayOption[i].checked

因为这就是我所需要的。我收到的错误是

未捕获的TypeError:无法读取未定义的属性“checked”

const column=document.querySelector（'.column'）；
const table=document.querySelector（'.table'）；
const details=document.querySelector（'.details'）；
onload=函数（）{
const displaypoption=document.getElementsByClassName（“displaypoption”）；
对于（i=0；i

.column{
显示：网格；
}
.桌子{
显示：无；
}
.表格.详情{
显示：无；
}

正在显示第一个div
正在显示第二个div
第三个div显示在eventListener中，要引用被单击的元素，请使用
this
而不是
DisplayOption[i]
。另一个bug正在使用
表。详细信息
-应该只有
详细信息
。请参阅下面更正的演示：


const column=document.querySelector（'.column'）；
const table=document.querySelector（'.table'）；
const details=document.querySelector（'.details'）；
onload=函数（）{
const displaypoption=document.getElementsByClassName（“displaypoption”）；
对于（i=0；i

.column{
显示：网格；
}
.桌子{
显示：无；
}
.表格.详情{
显示：无；
}

正在显示第一个div
正在显示第二个div
第三个div显示在eventListener中，要引用被单击的元素，请使用
this
而不是
DisplayOption[i]
。另一个bug正在使用
表。详细信息
-应该只有
详细信息
。请参阅下面更正的演示：


const column=document.querySelector（'.column'）；
const table=document.querySelector（'.table'）；
const details=document.querySelector（'.details'）；
onload=函数（）{
const displaypoption=document.getElementsByClassName（“displaypoption”）；
对于（i=0；i

.column{
显示：网格；
}
.桌子{
显示：无；
}
.表格.详情{
显示：无；
}

正在显示第一个div
正在显示第二个div
第三个div正在显示
您可以使用CSS实现同样的效果！不需要javascript

您可以使用CSS中的
同级
（~）选择器，并显示相应的
div


div{
显示：无；
}
输入[value=“column”]：选中~.列，
输入[value=“table”]：选中。表格，
输入[value=“details”]：选中。详细信息{
显示：块；
}

正在显示第一个div
正在显示第二个div
第三个div正在显示
您可以使用CSS实现同样的效果！不需要javascript

您可以使用CSS中的
同级
（~）选择器，并显示相应的
div


div{
显示：无；
}
输入[value=“column”]：选中~.列，
输入[value=“table”]：选中。表格，
输入[value=“details”]：选中。详细信息{
显示：块；
}

正在显示第一个div
正在显示第二个div
第三个div正在显示
这真的很好：）而且很简单。但是第一个div需要是display grid not block。您可以声明
输入[value=“column”]：checked ~.column{display:grid}
单独声明：）即使我选择了第一个答案，因为它解决了问题中的错误，但我使用的是您的简单解决方案。谢谢你，伙计！干杯祝你好运这真的很好：）而且很简单。但是第一个div需要是display grid not block