У меня есть кнопка отправки, которая использует 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
не показывалось?
Спасибо,
Джош
Ваш вопрос не ясен. Есть два элемента display: none
- кнопка и div1, не уверен, что именно вы хотите получить.
В JS =
означает присваивание, тогда как ==
или ===
означает сравнение на равенство. Так что пробуйте if (x.style.display === 'none')
.
Привет, когда отображается gform_submit_button_1
, я бы хотел, чтобы «div1» был скрыт. Когда gform_submit_button_1
не отображается, я хочу div1
показать. Я не вызываю эту функцию, я просто хотел, чтобы она выполнялась при изменении встроенного стиля кнопки.
if (x.style.display = 'none')
Это должно быть:
if (x.style.display == 'none')
в противном случае оператор if
вернет true
во всех случаях, а свойство x.style.display
всегда будет 'none'
.
Как и в разделе комментариев, =
используется для присваивания, ==
для сравнения значений, тогда как ===
используется для сравнения типов и значений.
И для этого
Когда условие истинно и style = "" страница не обновляется, в чем наверное дело.
вы должны где-то вызвать функцию, чтобы ее можно было выполнить после загрузки страницы.
Код (который проверяет свойства стиля) должен иметь два прослушивателя событий: 1. При загрузке 2. При некотором изменении. При этом
Точно! @str1ng
Кстати, ваш ответ не совсем заполнен и не совсем прояснен. Я отредактирую его, поэтому, если вы считаете его подходящим, пожалуйста, примите его.
Я попробовал это, и это тоже не сработало.
Поскольку очередь на редактирование ответа от @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 отображается, но не скрывается.
@JoshRodgers Ну, вы не добавили прослушиватель событий (дополнительный). В основном, когда вы загружаете сайт (заходите на него), код внутри этой функции выполняется (только один раз!!!) -> ваша кнопка скрыта, тогда как if (x.style.display == "none")
равно true, что приведет к отображению div1
. Как я уже сказал в ответе (я не мог дать вам правильный код, потому что я не знаю, какая кнопка запуска должна отображаться), вам нужно добавить еще один прослушиватель событий.
@JoshRodgers Кроме того, есть еще один возможный подход -> изначально установить для свойства отображения div1 значение block, а для свойства display кнопки — значение none. После этого вам нужно просто написать одну функцию (которая будет запускаться действием), в этой функции вам нужно установить для свойства отображения div значение none, а для свойства кнопки — значение block. (Также спорно в соответствии с вашими требованиями -> это будет нормально, если ваш сайт не заставит кнопку снова исчезнуть через X количество времени после того, как кнопка будет показана или div скрыт)
Кроме того, вы также можете просто добавить HTML-поле Gravity Form с вашим альтернативным div внутри. Затем используйте условную логику, чтобы показать ее, когда кнопка отправки скрыта.
Итак, я не думал об этом подходе... однако для кнопки отправки нет условной логики. Но я смог заставить его работать на поле. Итак, изначально я скрываю кнопку отправки, если поле не соответствует числу. Но я также могу сделать то же самое, но наоборот... показать поле html, если поле не соответствует числу. Это определенно работает :-)
Что вы хотите показать, когда
button
невидим? И когда выполняетсяmyFunction
?