Question

我正在尝试使用javascript创建一个具有两个字段集的页面，我要使第二个字段集不显示，直到我单击“下一步”按钮，然后第一个字段集才不显示，我也希望“下一步”按钮更改为输入提交，因此这是我的代码

<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";

}

但是，当我单击“下一步”按钮时，将显示第二个字段集，然后返回到第一个字段集，该按钮完全没有改变。谁能告诉我我在做什么错？谢谢

Answer 1

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

Answer 2

Working fiddle 。

请确保将函数放在head标记的顶部，然后它应该可以工作，否则，您将获得：

未捕获的ReferenceError：未定义myFunction

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"才能阻止提交。

单击按钮替换字段集

2 个答案: