1

У меня есть скрипт, который при нажатии на кнопку удаляет стили, скрывающие несколько div и добавляет новую кнопку, которая при нажатии возвращает стили. Нужно сделать бесконечный цикл, который при нажатии на одну кнопку будет выполнять ее действие, удалять кнопку и добавлять другую. Сам скрипт написан, но проблема в том, что мне нужно вызвать первую функцию в последней, но выбивает ошибку Uncaught TypeError: Cannot read property 'remove' of null.

Скрипт:

Расширенный Фильтр

<script>
function deleteStyles() {
  let myobj = document.getElementById("style-mobile");
  myobj.remove();
  let mybutton = document.getElementById("style-mobile-button");
  mybutton.remove();
  jQuery(document).ready(function($) {
    //использование jQuery как $
    $( ".stm-multiple-select" ).after( "<a onclick='addStyles()' id='style-mobile-button1' class='button stm-multiple-extend'><span>Убрать</span></a>" );
}); 
};
function addStyles(){
jQuery(document).ready(function show($) {
    //использование jQuery как $
    $( ".stm-multiple-select" ).after( "<a onclick='deleteStyles()' id='style-mobile-button' class='button stm-multiple-extend'><span>Розширений фільтр</span></a>" );
});
var status=document.getElementsByClassName('stm-filter_status');
for(var i=0; i<status.length; i++)status[i].style.display='none';
var ca_year=document.getElementsByClassName('stm-filter_ca-year');
for(var i=0; i<ca_year.length; i++)ca_year[i].style.display='none';
var fuel=document.getElementsByClassName('stm-filter_fuel');
for(var i=0; i<fuel.length; i++)fuel[i].style.display='none';
var body=document.getElementsByClassName('stm-filter_body');
for(var i=0; i<body.length; i++)body[i].style.display='none';
var transmission=document.getElementsByClassName('stm-filter_transmission');
for(var i=0; i<transmission.length; i++)transmission[i].style.display='none';
var price=document.getElementsByClassName('filter-price');
for(var i=0; i<price.length; i++)price[i].style.display='none';
var co2=document.getElementsByClassName('stm-filter_co2');
for(var i=0; i<co2.length; i++)co2[i].style.display='none';
var select=document.getElementsByClassName('stm-multiple-select');
for(var i=0; i<select.length; i++)select[i].style.display='none';
let mybutton1 = document.getElementById("style-mobile-button1");
mybutton1.remove();

};
</script>

Вызов первой функции должен быть после mybutton1.remove();

2
  • Почему вы никак с ошибкой не разбираетесь? Там явно указано что элемент не найден.
    – user347472
    30 мар 2021 в 16:28
  • Я уже разобрался с задачей. понял свой косяк: Я поставил стили элементам без айдишника, (оригинальные стили с айдишником до этого удалил), а по циклу должны удалятся стили с id="style-mobile". 30 мар 2021 в 16:40

1 ответ 1

0

Рабочий скрипт:

<a onclick='deleteStyles()' id='style-mobile-button' class='button stm-multiple- 
 extend'> 
<span>Расширенный Фильтр</span></a> <br>
<script>

function deleteStyles() {
  let myobj = document.getElementById("style-mobile");
  myobj.remove();
  let mybutton = document.getElementById("style-mobile-button");
  mybutton.remove();
  jQuery(document).ready(function($) {
    //использование jQuery как $
    $( ".stm-multiple-select" ).after( "<a onclick='addStyles()' id='style-mobile-button1' class='button stm-multiple-extend'><span>Убрать</span></a>" );
}); 

};
function addStyles(){
jQuery(document).ready(function show($) {
    //использование jQuery как $
    $( ".stm-multiple-select" ).after( "<a onclick='deleteStyles()' id='style-mobile-button' class='button stm-multiple-extend'><span>Расширенный Фильтр</span></a>" );
});
    $( ".sidebar-entry-header" ).after( "<style id='style-mobile'>@media (max-width: 426px){    .stm-filter_status{display:none}    .stm-filter_ca-year{display:none}   .stm-filter_fuel{display:none}  .stm-filter_body{display:none}  .stm-filter_transmission{display:none}  .filter-price{display:none} .stm-filter_co2{display:none}   .stm-multiple-select{display:none}} </style>" );
document.getElementById("style-mobile-button1").remove();
};
</script>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.