Здравствуйте. Мне необходимо на сайте сделать несколько форм, которые будут раскрываться по нажатию определенной кнопки. В интернете нашёл решение как с помощью js такое реализовать, для этого нужно использовать следующий код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hidden</title>
<style>
form.link {
cursor: pointer;
color: blue;
text-decoration: underline;
form.link_2 {
cursor: pointer;
color: blue;
text-decoration: underline;
</style>
</head>
<body>
<form id="auth" class="link">
<p><label>Логин: <input name="user" required></label></p>
<p><label>Пароль: <input name="pass" type="password" required></label></p>
<p><input type="submit" value="Войти"></p>
<button id="button_1" onclick="showForm('auth_2', 'button_1')">Дополнительное меню</button>
</form>
<form id="auth_2" class="link_2" hidden>
<p><label>Логин: <input name="user" required></label></p>
<p><label>Пароль: <input name="pass" type="password" required></label></p>
<p><input type="submit" value="Войти"></p>
<button id="button_2" onclick="showForm('auth_3', 'button_2')">Дополнительное меню</button>
<button id="button_3" onclick="hideForm('auth_2', 'button_1')">Скрыть дополнительное меню</button>
</form>
<script>
function showForm(a, b) {
document.getElementById(a).hidden = false;
document.getElementById(b).hidden = true;
}
function hideForm(a, b) {
document.getElementById(a).hidden = true;
document.getElementById(b).hidden = false;
}
</script>
</body>
</html>
При таком варианте всё работает как нужно. Но мне на сайте нужно использовать Document.getElementsByClassName
При таком варианте работать не хочет. Пожалуйста подскажите в чем дело. Заранее спасибо. Вот код, который не работает:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hidden</title>
<style>
form.link {
cursor: pointer;
color: blue;
text-decoration: underline;
</style>
</head>
<body>
<form id="auth" class="form_1">
<p><label>Логин: <input name="user" required></label></p>
<p><label>Пароль: <input name="pass" type="password" required></label></p>
<p><input type="submit" value="Войти"></p>
<button id="link" onclick="showForm('form_2')">+</button>
</form>
<form id="auth_2" class="form_2" hidden>
<p><label>Логин: <input name="user" required></label></p>
<p><label>Пароль: <input name="pass" type="password" required></label></p>
<p><input type="submit" value="Войти"></p>
</form>
<script>
function showForm(a) {
rootElement.getElementsByClassName(a).hidden = false;
}
</script>
</body>
</html>
