CODEWITHSUNDEEP
javascripthtmlcss
Florianvdab
Florianvdab

Reputation: 17

remove display:none from a css class in JS

I've made this list of GoT charachters that could possible die (there's no spoilers or what so ever). The problem I'm having is that I'm supposed to remove a class but I can't make it work. I could just remove the CSS, I know but that's not what I'm trying to achieve here. I can't find the way to delete a CSS class during a JS event/function.

I can make it work by deleting the "li" tags so that part I've completed.

My HTML:

<ul class="carousel">
   <!-- <li><img src="images/cersei-lannister-1920.jpg" alt="Cersei Lannister" title="Cersei Lannister"/></li>
    <li><img src="images/daenarys-1920.jpg" alt="Daenarys" title="Daenarys"/></li>
    <li><img src="images/maetser-varys-1920.jpg" alt="Maester Varys" title="Maester Varys"/></li>-->
</ul>

MY JS:

function changeImageIndex(value){
    let charachter =["images/cersei-lannister-1920.jpg","images/daenarys-targaryen-1920.jpg", "images/maester-varys-1920.jpg", "images/margarey-tyrell-1920.jpg", "images/petyr-baelish-1920.jpg", "images/samwell-tarly-1920.jpg", "images/sansa-stark-1920.jpg"];


    let str = "<li><img src='";


    if(value === "1")
    {
        parseInt(i += 1);
        if( i > 6)
        {
            i = 0
        }
        str += charachter[i];

        console.log(str);
    }

    else{
        parseInt(i -= 1);
        if( i < 0)
        {
            i = 6;
        }

        str += charachter[i];
        console.log(str);
    }




    str += "'></img></li>";

    console.log(str);


    let HTML = document.getElementsByClassName("carousel")[0];
    console.log(document.querySelector("ul li").classList.remove("carousel"));

    document.querySelector("li").classList.remove("carousel");


    HTML.innerHTML = str;


}

MY CSS that I want gone:

.carousel li {
  display: none;
}

I hope you guys can help me out here! Thanks!

Upvotes: 1

Views: 6209

Answers (3)

Moutimedia
Moutimedia

Reputation: 61

Maybe if you add a class by js and in CSS you do what you want

.carousel li.active{display:inline-block;}

Hope you can make it :)

Upvotes: 0

user7207170
user7207170

Reputation:

Make a seperate class take ".hidecarousel" for display:none and add it to your CSS. Use the class name in your li tags. And then make use of the javascript to simply remove it.

var list = document.getElementsByClassName("hidecarousel");
while (list.length)
    list[0].classList.remove("hidecarousel");

Here is how you can change the CSS of all the li inside your carousel ul to block. 

var array_of_li = document.querySelectorAll("ul.carousel li");
var i;
for (i = 0; i < array_of_li.length; ++i) {
  array_of_li[i].style.display = "block";
}
.carousel li {
  display: none;
}
<ul class="carousel">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

Upvotes: 2

Spleen
Spleen

Reputation: 33

From what I understand you are not using jQuery so here is the Javascript solution for removing a class from an element.

ELEMENT.classList.remove("CLASS_NAME");

Upvotes: 0

Related Questions