单击按钮时替换字段集

Question

我正在尝试创建一个页面，其中我有两个字段集，使用 javascript 我想让第二个字段集在我单击 "Next" 按钮之前不显示，然后是第一个字段集也变得不显示我想将 "Next" 按钮更改为输入提交所以这是我的代码

<fieldset id="1">
       ...
</fieldset>
<fieldset id='2' style="display:none;">
       ...
</fieldset>
<div>
   <input class="cancel" type="reset" name="Cancel" value="Annuler"/>
   <button id="4" class="ok" onclick="myFunction()" >Next</button>
   <input  id="3" class="ok" type="submit" value="Done" style="display:none;" />
</div>

function myFunction() {
    var x = document.getElementById("1");
    var y = document.getElementById("2");
    var z = document.getElementById("3");
    var a = document.getElementById("4");

    y.style.display = "block";
    z.style.display = "block";
    x.style.display = "none";   
    a.style.display = "none";

}

但是当我点击 "Next" 按钮时，显示第二个字段集然后返回到第一个字段集，按钮根本没有改变。谁能告诉我我做错了什么？谢谢

Answer 1

ID 对一个元素必须是唯一的。您有多个具有相同 id 的元素，这将导致各种问题。

Answer 2

Working fiddle.

确保您将函数放在 head 标签内的顶部，然后它应该可以工作，否则您会得到：

Uncaught ReferenceError: myFunction is not defined

function myFunction() {
  var x = document.getElementById("1");
  var y = document.getElementById("2");
  var z = document.getElementById("3");
  var a = document.getElementById("4");
  y.style.display = "block";
  z.style.display = "block";
  x.style.display = "none";
  a.style.display = "none";
}

<fieldset id="1">
  ...1
</fieldset>
<fieldset id='2' style="display:none;">
  ...2
</fieldset>
<div>
  <input class="cancel" type="reset" name="Cancel" value="Annuler" />
  <button id="4" class="ok" onclick="myFunction()">Next</button>
  <input id="3" class="ok" type="submit" value="Done" style="display:none;" />
</div>

注意： 您需要将 type="button" 添加到按钮以防止提交。

单击按钮时替换字段集

Replace fieldset on button click

javascript

fieldset