Скрыть div и li элементы когда чекбокс отмечен/не отмечен
Всем привет, может мне кто-то подсказать что я упускаю? Застряла и как только не пыталась уже но всё никак. Что я пытаюсь добавить
- Текст в текстовом поле и чекбокс отмечен - div элемент скрывается - Текст в текстовом поле и чекбокс не отмечен при загрузке - первый li элемент скрывается - Пустое текстовое поле при загрузке и чекбокс отмечен - второй li элемент скрывается Вот так код выглядит сейчаc
let txt = document.getElementById("name")
let but = document.getElementById("send")
let out = document.getElementById("greeting")
let divv = document.getElementById("errors")
let nameError = document.getElementById("name-error")
let consError = document.getElementById("consent-error")
let cons = document.getElementById("consent")
but.disabled = true
divv.style.display = "block"
cons.addEventListener("input", function() {
if (cons.checked && txt.value !== ''){
consError.style.display = "none"
but.disabled = false
} else {
consError.style.display = "block"
but.disabled = true
}
})
txt.addEventListener("input", function(){
if (txt.value !== '' && cons.checked === false ) {
but.disabled
} else {
but.disabled = false
}
})
function fun () {
out.textContent = "Hey " + txt.value + "!"
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A checkbox</title>
</head>
<body>
<label for="name">Name</label>
<input id="name" placeholder="Name">
<label>
<input id="consent" type="checkbox">
I agree
</label>
<input id="send" type="button" value="Submit">
<p id="greeting"></p>
<div id="errors" style="color: red; display: none;">
<p>Error:</p>
<ul>
<li id="name-error">Please enter a name</li>
<li id="consent-error">Please give consent</li>
</ul>
</div>
<script src="index.js"></script>
</body>
</html>
Ещё пыталась с "cons.addEventListener" как ниже и второй li element скрывался, но кнопка была активной
cons.addEventListener("input", function() {
if (cons.checked){
consError.style.display = "none"
} else {
consError.style.display = "block"
}
})
|
ana_ok,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A checkbox</title>
</head>
<body>
<label for="name">Name</label>
<input id="name" placeholder="Name">
<label>
<input id="consent" type="checkbox">
I agree
</label>
<input id="send" type="button" value="Submit" disabled="disabled">
<p id="greeting"></p>
<div id="errors" style="color: red;">
<p>Error:</p>
<ul>
<li id="name-error">Please enter a name</li>
<li id="consent-error">Please give consent</li>
</ul>
</div>
<script>
let txt = document.getElementById("name")
let but = document.getElementById("send")
let out = document.getElementById("greeting")
let divv = document.getElementById("errors")
let nameError = document.getElementById("name-error")
let consError = document.getElementById("consent-error")
let cons = document.getElementById("consent")
function verification() {
let check = !!cons.checked,
value = !!txt.value.trim();
nameError.hidden = value;
consError.hidden = check;
divv.hidden = value && check;
but.disabled = !divv.hidden;
}
txt.addEventListener("input", verification);
cons.addEventListener("input", verification);
function fun() {
out.textContent = "Hey " + txt.value + "!"
}
but.addEventListener("click", fun);
</script>
</body>
</html>
|
Спасибо большое за помощь! :)
|
| Часовой пояс GMT +3, время: 13:01. |