Показать сообщение отдельно
  #1 (permalink)  
Старый 27.10.2022, 19:40
Новичок на форуме
Отправить личное сообщение для ana_ok Посмотреть профиль Найти все сообщения от ana_ok
 
Регистрация: 27.10.2022
Сообщений: 2

Скрыть 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"
  }
})
Ответить с цитированием