Как вернуть эффект javascript обратно на дисплей: нет при повторном нажатии кнопки?

ProgramBox

Как вернуть эффект javascript обратно на дисплей: нет при повторном нажатии кнопки?

Post author:admin
Запись опубликована:11 мая, 2023
Post category:Вопросы по программированию

#javascript

Вопрос:

 <button onclick="updateProfile()">Change profile pic</button>
<form method='POST' id='form2' style="display:none;">
    {% csrf_token %}
    <fieldset class="form-group">
        <legend class="border-bottom mb-4">
            Join Today
        </legend>
        {{form2|crispy}}
    </fieldset>
</form>

   
function updateProfile() {
    console.log(this)
    document.getElementById("form1").style.display = "block";
}

Я могу изменить эффект только одним способом. Как изменить эффект обратно на отображение: нет, чтобы форма снова не отображалась?

1. добавьте логическую переменную и проверяйте всякий раз, когда вы нажимаете на кнопку, каково значение логического значения. переключение между отображаемым и не отображаемым в зависимости от значения, а затем измените логическое значение

Ответ №1:

Для достижения ожидаемого результата используйте приведенную ниже опцию переключения с логической переменной

Установите переменной значение false по умолчанию
При каждом нажатии функции переключайте ее значение
В зависимости от состояния переменной установите block или none

 var toggle = false
function updateProfile() {
  toggle =!toggle
    document.getElementById("form2").style.display = toggle ? "block" : "none";
}

 <button onclick="updateProfile()">Change profile pic</button>
<form method='POST' id='form2' style="display:none;">
    {% csrf_token %}
    <fieldset class="form-group">
        <legend class="border-bottom mb-4">
            Join Today
        </legend>
        {{form2|crispy}}
    </fieldset>
</form>

Ответ №2:

Вы можете добавить условие для проверки document.getElementById("form2").style.display == "none"

 function updateProfile() {
    //console.log(this)
    if(document.getElementById("form2").style.display == "none") {
    document.getElementById("form2").style.display = "block";
    }else{
    document.getElementById("form2").style.display = "none";
    }
}

 <button onclick="updateProfile()">Change profile pic</button>
<form method='POST' id='form2' style="display:none;">
<input type="text" />
</form>

Ответ №3:

Что-то вроде этого поможет:

 updateProfile = () => {
  let el = document.getElementById("form2");
  if (getComputedStyle(el).display === 'none') {
    el.style.display = "block";
  } else {
    el.style.display = "none";
  }
}

 <button onclick="updateProfile()">Change profile pic</button>
<form method='POST' id='form2' style="display:none;">
  <fieldset class="form-group">
    <legend class="border-bottom mb-4">
      Join Today
    </legend>
  </fieldset>
</form>

Или, в качестве альтернативы, вы можете воспользоваться data атрибутами:

 updateProfile = () => {
  let el = document.getElementById("form2");
  el.setAttribute('data-state',
    el.getAttribute('data-state') === 'open' ? 'closed' : 'open');

}

 form[data-state=open] {
  visibility: visible;
}

form[data-state=closed] {
  visibility: hidden;
}

 <button onclick="updateProfile()">Change profile pic</button>
<form method='POST' id='form2' data-state="closed">
  <fieldset class="form-group">
    <legend class="border-bottom mb-4">
      Join Today
    </legend>
  </fieldset>
</form>

Или даже некоторые простые старые классы:

 updateProfile = () => {
  let el = document.getElementById("form2");
  if (new Set(el.classList).has('show')) {
    el.classList.remove('show');
    el.classList.add('hide');
  } else {
    el.classList.remove('hide');
    el.classList.add('show');
  }
}

 .show {
  display: block;
}

.hide {
  display: none;
}

 <button onclick="updateProfile()">Change profile pic</button>
<form method='POST' id='form2' class="show">
  <fieldset class="form-group">
    <legend class="border-bottom mb-4">
      Join Today
    </legend>
  </fieldset>
</form>

Надеюсь, это поможет,

1. Не полагайтесь на Element.style.property как на средство получения, чтобы сообщить вам, какой стиль применен к элементу. getComputedStyle твой друг.

2. @Kaiido Интересно, я обновил свой первый блок, чтобы учесть это. Мне нужно будет подробнее изучить getComputedStyle . Если вы можете сэкономить мне немного времени, в чем причина этого?

3. Потому что Element.style отражает только содержимое style атрибута, но у вас вполне могут быть внешние таблицы стилей, определяющие, каким должно быть реальное значение. jsfiddle.net/ja2n89Lx Но, как правило, вы все равно хотите иметь дело с Element.style как можно меньше. Например, чтобы сделать то, что хочет OP, им было бы лучше переключить класс в контейнере и реагировать на этот класс из CSS. Таким образом проще управлять полным макетом.

Ответ №4:

Скрыть / отобразить форму:

Этот метод используется class для скрытия / отображения формы. Вы можете просто добавить стиль в свой .css файл.

     <button onclick="updateProfile({d:this});return false;">Change profile pic</button>
    <form method='POST' id='form2' class="di-0">
        {% csrf_token %}
        <fieldset class="form-group">
            <legend class="border-bottom mb-4">
                Join Today
            </legend>
            {{form2|crispy}}
        </fieldset>
    </form>


    <script>
        function updateProfile(z){
            var x,a;
            x=/(di-0)/i;
            if(x.test(z.d.nextElementSibling.attributes.getNamedItem('class').nodeValue)){a=1}else{a=0}
            switch (a){
                case 1:
                    z.d.nextElementSibling.attributes.getNamedItem('class').nodeValue='di-2';
                    break;
                case 0:
                    z.d.nextElementSibling.attributes.getNamedItem('class').nodeValue='di-0';
                    break;
                }
        }
    </script>
    <style>.di-0{display:none!important}.di-1{display:inline-block}</style>

Отображение / скрытие формы:

Если вы хотите поступить иначе, вы можете изменить class="di-0" на class="di-1" :

     <button onclick="updateProfile({d:this});return false;">Change profile pic</button>
    <form method='POST' id='form2' class="di-1">
        {% csrf_token %}
        <fieldset class="form-group">
            <legend class="border-bottom mb-4">
                Join Today
            </legend>
            {{form2|crispy}}
        </fieldset>
    </form>


    <script>
        function updateProfile(z){
            var x,a;
            x=/(di-0)/i;
            if(x.test(z.d.nextElementSibling.attributes.getNamedItem('class').nodeValue)){a=1}else{a=0}
            switch (a){
                case 1:
                    z.d.nextElementSibling.attributes.getNamedItem('class').nodeValue='di-2';
                    break;
                case 0:
                    z.d.nextElementSibling.attributes.getNamedItem('class').nodeValue='di-0';
                    break;
                }
        }
    </script>

    <style>.di-0{display:none!important}.di-1{display:inline-block}</style>

Этот метод также будет работать в других формах. Ключ в том, чтобы иметь hide/display тег сразу после button тега или действия, такого как a тег.

     <a href="#" onclick="updateProfile({d:this});return false;">Change profile pic</a>
    <div class="di-0">
        Display | Display | Display
    </div>


    <script>
        function updateProfile(z){
            var x,a;
            x=/(di-0)/i;
            if(x.test(z.d.nextElementSibling.attributes.getNamedItem('class').nodeValue)){a=1}else{a=0}
            switch (a){
                case 1:
                    z.d.nextElementSibling.attributes.getNamedItem('class').nodeValue='di-2';
                    break;
                case 0:
                    z.d.nextElementSibling.attributes.getNamedItem('class').nodeValue='di-0';
                    break;
                }
        }
    </script>

    <style>.di-0{display:none!important}.di-1{display:inline-block}</style>