Javascript 如何更改单击按钮时在HTML表单中显示的表单？

我希望这样，当我点击输入表单上的计算按钮时，它会自动将显示更改为摘要表单。现在，我有一个功能正常的选择器按钮，我可以用它在每个表单之间平移。我仍然希望能够在这三个表单之间平移，我只希望在单击“计算”按钮时将其带到摘要。有人能帮我想出一些东西来添加到我的执行计算功能中，以添加此功能吗？（请不要使用jquery）。现在，我的代码如下所示：

HTML:

CSS:

---

这应该可以做到：

const myForms=document.getElementById（'my-forms'）；
document.getElementById（'form-selector'）。oninput=ev=>
myForms.className=`f-${ev.target.value}`；
document.querySelector（'button'）。onclick=ev=>
（myForms.className=“f-Summary”，false）

#我的表单{显示：无}
#my-forms.f-Input表单[name=Input]，
#my-forms.f-Output表单[名称=输出]，
#my-forms.f-Summary表单[name=Summary]{display:block}

挑一个！
输入
输出
总结
表单输入
计算
表单输出
表格摘要

不清楚或尝试使用snippet我认为这个解决方案是正确的，但是在我的IDE中，.value“被给出了警告“unresolved variable value”，第二次使用“=ev=>”显示为未使用的参数。知道怎么回事吗？

<select id="form-selector">
  <option value="_" selected disabled>pick one !</option>
  <option value="Input">Input</option>
  <option value="Output">Output</option>
  <option value="Summary">Summary</option>
</select>

<div id="my-forms">
  <form name="Input">
    <!-- All of the input boxes and a "Calculate" button -->
    <h4> form Input</h4>
  </form>
  <form name="Output">
    <!-- All of the output boxes -->
    <h4> form Output</h4>
  </form>
  <form name="Summary">
    <!-- A few more output boxes -->
    <h4> form Summary</h4>
  </form>
</div>

const formSelect = document.getElementById('form-selector'),   
myForms    = document.getElementById('my-forms');
formSelect.oninput=()=>{ myForms.className = `f-${formSelect.value}` }

#my-forms form { display:none }
#my-forms.f-Input form[name=Input],
#my-forms.f-Output form[name=Output],
#my-forms.f-Summary form[name=Summary] { display:block }