0

I want to make a cycle of functions while pressing buttons show additional filters and hide additional filters. This is my script:

<script>
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> <br>" );
}); 
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>

In function addStyles after mybutton1.remove(); I have to add link It to function show($) to make an endless cycle. How can I do that if show($) is written on JQuery and addStyles is on JS?

Sasha Sasha
  • 1
  • 2
  • Welcome to Stack Overflow! Please post your HTML as well. Without it, we're only guessing. However, part of the problem is that `getElementsByClassName` gets a collection of elements and not a singular element so you need to loop through all the elements or choose one specifically. https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName – disinfor Mar 30 '21 at 14:14
  • Since you're using jQuery anyway, just do `$(".stm-filter_status").css("display", "none")` – James Mar 30 '21 at 14:53
  • Thanks guys, but none of you were right. That is correct answer: `var status=document.getElementsByClassName('stm-filter_status'); for(var i=0; i – Sasha Sasha Mar 30 '21 at 15:19
  • _Thanks guys, but none of you were right._ Yes, I was. You are looping through a collection of elements - that's what your `for` loop is doing. There was no answer given. – disinfor Mar 30 '21 at 22:12

0 Answers0