Question

我正在尝试优化我的Login / Registerscript，并希望知道在点击按钮后我如何显示2个输入框。

JavaScript的：

<script type="text/javascript">
function unhideLog() {
document.getElementById('login').style.display = "block";
}
function unhideReg() {
document.getElementById('register').style.display = "block";
}
</script>

HTML：

<form action="register.php" method="POST">
    <input type="button" value="Registrieren" onClick="unhideReg()" />
    <input type="input" value="test" name="userreg" id="register" style="display:none"  />
    <input type="password" value="Test" name="passreg" id="register" style="display:none" />
    <input type="submit" value="Registrieren" id="register" style="display:none"/>
</form>

我不知道当Inputbox都具有相同的ID时是否可能。还尝试了不同的ID，但它也没有用。问题是单击Button后不会显示Inputbox。

希望有人知道如何解决这个问题。

Answer 1

在HTML ID必须是唯一的中，您多次使用id="register"，因此您的HTML无效。

使ID唯一。

请参阅DEMO

是否无法一次显示所有输入框

您可以使用document.getElementsByClassName，返回包含任何给定类名的所有子元素的数组。

DEMO with document.getElementsByClassName

修改的

OP更新了问题

您需要使用()。

使用unhideReg()代替unhideReg

<input type="button" value="Registrieren" onClick="unhideReg()" />

DEMO

Answer 2

ID应该是唯一的。对于共享行为，您应该使用.class

以下是EXAMPLE使用类来显示.className

中的几个元素

<强> HTML ：

<form action="register.php" method="POST">
    <input type="button" value="Registrieren" onclick="showControls('hiddenControl');" />
    <input type="input" class="hiddenControl" value="test" name="userreg" />
    <input type="password" class="hiddenControl" value="Test" name="passreg" />
    <input type="submit" class="hiddenControl" value="Registrieren" />
</form>

<强> CSS ：

.hiddenControl {display:none;}

<强> JS ：

function showControls(className) {
    var els = document.getElementsByClassName(className);
    for (var i = 0, len = els.length; i < len; i++) {
        els[i].style.display = 'block';
    }
}

单击按钮显示输入框

2 个答案: