Javascript 在单个HTML文档中创建不同页面视图时出现问题？

我正在创建一个基本的html文档，在一个文档中有三个不同的视图。如果按“下一步”按钮，文档应允许您转到下一个视图（第2页和第3页）

特别是，在第2页中，在您检查所有收音机之前，该按钮将被阻止，然后文档将允许您继续下一步：

功能显示（显示、隐藏）{
document.getElementById（已显示）.style.display='block'；
document.getElementById（隐藏）.style.display='none'；
document.querySelector（'[data testid=“crowd submit”]'）。style.display='inline block'；
滚动到（0，0）；
返回false；
}
函数启用按钮（）{
if（document.querySelectorAll（“input[type^=radio]：checked”）.length==document.querySelectorAll（“Page1.container”）.length）{
document.getElementById（'button'）。disabled=false；
}
}

.row{
显示器：flex；
}
.第h3排{
文本对齐：居中；
边框底部：实心；
宽度：100%；
保证金：0；
填充：.5rem 0；
边框宽度：1px
}
.行。布局一个分区，
.行.布局图二分区{
填充：.5rem；
}
.布局一，
.布局二{
边框：.1rem-solid#000；
边框：实心；
边框宽度：1px；
弹性：1；
保证金：0.1rem；
}
h1{
文本对齐：居中；
}
[data testid=“群组提交”]{
显示：无；
}
.边界{
边框：2个蓝色虚线；
}
mr-0{}
.ml自动{
左边距：自动；
}
d区{
显示：块；
}
h4{
利润率：20px；
}
输入[类型=收音机]{
利润率：15px；
填充：0；
}
.详情，
.摘要{
左边距：10px；
颜色：黑色；
背景#d3；
显示：真；
}

第1/3部分
转到第2页
第2/3部分
问题2？
A.
B
转到第3页
第3/3部分
问题3？
X
Y

我稍微更改了您的代码。我只是没有考虑返回的步骤，因为你没有提到它。

var pageNumber=1；
功能手柄页（按钮）{
页码=页码+1；
button.innerText=“转到页面”+（页码+1）；
document.getElementById（'Page'+pageNumber.）.style.display='block'；
document.getElementById（'Page'+（pageNumber-1））.style.display='none'；
开关（页码）
{
案例1：
打破
案例2：
document.getElementById（'button1'）。disabled=true；
打破
案例3：
document.getElementById（'button1'）。disabled=true；
document.getElementById（'button1'）。style.display='none'；
document.querySelector（'[data testid=“crowd submit”]'）。style.display='inline block'；
打破
}
如果（页码>=3）
页码=页码-1；
滚动到（0，0）；
返回false；
}
函数启用按钮（）{
document.getElementById（'button1'）。disabled=false；
}

.row{
显示器：flex；
}
.第h3排{
文本对齐：居中；
边框底部：实心；
宽度：100%；
保证金：0；
填充：.5rem 0；
边框宽度：1px
}
.行。布局一个分区，
.行.布局图二分区{
填充：.5rem；
}
.布局一，
.布局二{
边框：.1rem-solid#000；
边框：实心；
边框宽度：1px；
弹性：1；
保证金：0.1rem；
}
h1{
文本对齐：居中；
}
[data testid=“群组提交”]{
显示：无；
}
.边界{
边框：2个蓝色虚线；
}
mr-0{}
.ml自动{
左边距：自动；
}
d区{
显示：块；
}
h4{
利润率：20px；
}
输入[类型=收音机]{
利润率：15px；
填充：0；
}
.详情，
.摘要{
左边距：10px；
颜色：黑色；
背景#d3；
显示：真；
}

第1/3部分
第2/3部分
问题2？
A.
B
第3/3部分
问题3？
X
Y
转到第2页

是因为这些元素在阴影dom中吗？@ProfessorAbronsius，是的，我这样做是为了隐藏橙色的提交按钮，逻辑是什么，然后获得预期的行为？Thanks@ProfessorAbronsius即使这样，“转到第3页”按钮也没有按预期工作，你知道如何解决这个问题吗？谢谢，这几乎是正确的行为。唯一的问题是，在

Page2

中，orage submit按钮应该被隐藏。提交按钮仅存在于

第3页
中。你知道如何在
Page1
和
Page2
中隐藏它，并在
Page3
中显示它吗？我修改了提交按钮。它现在显示在第3页上。最后一件事是，为什么小提琴中有一个类型错误“message:”TypeError:document.myForm未定义“，`脚本中有额外的代码。我把它删掉了。现在没有错误。哦，是控制台，谢谢你的帮助