Отображать div при встроенном стиле none

У меня есть кнопка отправки, которая использует Gravity Forms для условного отображения или скрытия кнопки.

Когда кнопка отображается, код выглядит так: <button class = "button gform_button" id = "gform_submit_button_1" style = "">

Когда кнопка не отображается, код выглядит так: <button class = "button gform_button" id = "gform_submit_button_1" style = "display: none;">

Итак, что я хотел сделать, так это отобразить div, когда кнопка не отображается или имеет встроенный стиль display: none.

Я думал, что могу сделать что-то вроде этого:

function myFunction() {
    var x = document.getElementById('gform_submit_button_1');
    if (x.style.display = 'none') {
        document.getElementById("div1").style.display = "block";
    } else {
        document.getElementById("div1").style.display = "none";
    }
}
<div id = "div1">This is a hidden div that we can show with JavaScript</div>

Это показывает div1, когда страница загружается, но когда style = "" элемент div не скрывается. Когда условие истинно и style = "" страница не обновляется, вероятно, проблема в этом. Есть ли способ настроить вещи так, чтобы когда style = ""div1 не показывалось?

Спасибо,
Джош

Что вы хотите показать, когда button невидим? И когда выполняется myFunction?

DreamBold 23.11.2022 00:39

Ваш вопрос не ясен. Есть два элемента display: none - кнопка и div1, не уверен, что именно вы хотите получить.

DreamBold 23.11.2022 00:40

В JS = означает присваивание, тогда как == или === означает сравнение на равенство. Так что пробуйте if (x.style.display === 'none').

Peter B 23.11.2022 00:42

Привет, когда отображается gform_submit_button_1, я бы хотел, чтобы «div1» был скрыт. Когда gform_submit_button_1 не отображается, я хочу div1 показать. Я не вызываю эту функцию, я просто хотел, чтобы она выполнялась при изменении встроенного стиля кнопки.

Josh Rodgers 23.11.2022 00:44
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
83
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

if (x.style.display = 'none') 

Это должно быть:

if (x.style.display == 'none') 

в противном случае оператор if вернет true во всех случаях, а свойство x.style.display всегда будет 'none'.

Как и в разделе комментариев, = используется для присваивания, == для сравнения значений, тогда как === используется для сравнения типов и значений.

И для этого

Когда условие истинно и style = "" страница не обновляется, в чем наверное дело.

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

Код (который проверяет свойства стиля) должен иметь два прослушивателя событий: 1. При загрузке 2. При некотором изменении. При этом

str1ng 23.11.2022 01:08

Точно! @str1ng

DreamBold 23.11.2022 01:13

Кстати, ваш ответ не совсем заполнен и не совсем прояснен. Я отредактирую его, поэтому, если вы считаете его подходящим, пожалуйста, примите его.

str1ng 23.11.2022 01:16

Я попробовал это, и это тоже не сработало.

Josh Rodgers 23.11.2022 19:17

Поскольку очередь на редактирование ответа от @Dream Bold заполнена, это мой ответ на этот вопрос, основанный на предыдущем ответе. В основном уточнение

Следующая строка кода:

if (x.style.display = 'none') 

Следует изменить на:

if (x.style.display == 'none') 

Основное отличие заключается в используемом операторе (==). В первом случае при использовании «=» оператор if всегда будет возвращать true, а свойство x.style.display всегда будет 'none'.

Как и в разделе комментариев, = используется для присваивания, == для сравнения значений, тогда как === используется для сравнения типов и значений.

Чтобы узнать больше о выражениях и операторах: Проверьте здесь

И относительно следующего требования

Когда условие истинно и style="" страница не обновляется, в чем наверное дело.

Проблема в том, что код не выполняется. Сначала вы должны создать функцию, а затем добавить прослушиватели событий или установить action, которая будет вызывать ранее созданную функцию, чтобы ее можно было выполнить после загрузки страницы.

Я предлагаю использовать window.onload + другой атрибут слушателя/действия события для элемента

Так:

window.onload = function(){
var x = document.getElementById("gform_submit_button_1");
if (x.style.display == "none"){
alert("Display of x is none");
document.getElementById("div1").style.display = "block";
}
else{
alert("Display of x is not none");
document.getElementById("div1").style.display = "none";
x.style.display = "block";
}
}

Я добавил этот код, и div отображается, но не скрывается.

Josh Rodgers 23.11.2022 19:17

@JoshRodgers Ну, вы не добавили прослушиватель событий (дополнительный). В основном, когда вы загружаете сайт (заходите на него), код внутри этой функции выполняется (только один раз!!!) -> ваша кнопка скрыта, тогда как if (x.style.display == "none") равно true, что приведет к отображению div1. Как я уже сказал в ответе (я не мог дать вам правильный код, потому что я не знаю, какая кнопка запуска должна отображаться), вам нужно добавить еще один прослушиватель событий.

str1ng 24.11.2022 00:34

@JoshRodgers Кроме того, есть еще один возможный подход -> изначально установить для свойства отображения div1 значение block, а для свойства display кнопки — значение none. После этого вам нужно просто написать одну функцию (которая будет запускаться действием), в этой функции вам нужно установить для свойства отображения div значение none, а для свойства кнопки — значение block. (Также спорно в соответствии с вашими требованиями -> это будет нормально, если ваш сайт не заставит кнопку снова исчезнуть через X количество времени после того, как кнопка будет показана или div скрыт)

str1ng 24.11.2022 00:38
Ответ принят как подходящий

Кроме того, вы также можете просто добавить HTML-поле Gravity Form с вашим альтернативным div внутри. Затем используйте условную логику, чтобы показать ее, когда кнопка отправки скрыта.

Итак, я не думал об этом подходе... однако для кнопки отправки нет условной логики. Но я смог заставить его работать на поле. Итак, изначально я скрываю кнопку отправки, если поле не соответствует числу. Но я также могу сделать то же самое, но наоборот... показать поле html, если поле не соответствует числу. Это определенно работает :-)

Josh Rodgers 23.11.2022 19:22

Другие вопросы по теме