Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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"
  }
})
Ответить с цитированием
  #2 (permalink)  
Старый 27.10.2022, 20:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

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>
Ответить с цитированием
  #3 (permalink)  
Старый 27.10.2022, 23:53
Новичок на форуме
Отправить личное сообщение для ana_ok Посмотреть профиль Найти все сообщения от ana_ok
 
Регистрация: 27.10.2022
Сообщений: 2

Спасибо большое за помощь!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему когда элемент выводится на новую строку его дочерние элементы не появляются? BIOkefirchik Элементы интерфейса 2 29.08.2017 13:32
Скрыть блок div. Monster123 Элементы интерфейса 10 28.07.2016 01:30
Как вернуть div и все вложенные в него элементы в первоначальное состояние? lucky89 Общие вопросы Javascript 17 26.02.2015 18:41
div перекрывает элементы формы kazakn Элементы интерфейса 4 02.04.2013 16:10
Есть ли способ проверить загрузку контента в div или отследить когда размер div-а изм ingwarr Events/DOM/Window 0 03.05.2012 17:02