Javascript is adding active class but not remove when click other button

Question

function grid_view() {
    grid_view_result();
    grid_view_button();
    
}

function grid_view_active() {
    if (document.getElementById("grid_view").className == "fa fa-th-large m-l-5") {
        document.getElementById("grid_view").className = "fa fa-th-large m-l-5 active";

    }
}
function grid_view_inactive() {
    if (document.getElementById("grid_view").className == "fa fa-th-large m-l-5 active") {
        document.getElementById("grid_view").className = "fa fa-th-large m-l-5";

    }
}

function grid_view_button() {
    if (document.getElementById("cooking_result").className == "recipes grid") {
        grid_view_active();
        return;
    }
    if (document.getElementById("cooking_result").className = "recipes list") {
        grid_view_inactive();
        return;
    }
}

function grid_view_result() {
    if (document.getElementById("cooking_result").className == "recipes list") {
        document.getElementById("cooking_result").className = "recipes grid";
        
    }
}




function list_view() {
    list_view_result();
    list_view_button();
    
}

function list_view_active() {
    if (document.getElementById("list_view").className == "fa fa-th-list m-l-5") {
        document.getElementById("list_view").className = "fa fa-th-list m-l-5 active";

    }
}
function list_view_inactive() {
    if (document.getElementById("list_view").className == "fa fa-th-list m-l-5 active") {
        document.getElementById("list_view").className = "fa fa-th-list m-l-5";

    }
}

function list_view_button() {
    if (document.getElementById("cooking_result").className == "recipes list") {
        list_view_active();
        return;
    }
    if (document.getElementById("cooking_result").className = "recipes grid") {
        list_view_inactive();
        return;
    }
}

function list_view_result() {
    if (document.getElementById("cooking_result").className == "recipes grid") {
        document.getElementById("cooking_result").className = "recipes list";
        
    }
}

.active{text-decoration:underline;}
.recipes.grid li{float:left;width:50%;height:50px;background:red;}
.recipes li:nth-child(2){background:blue !important;}
.recipes.list li{float:left;width:100%;height:50px;background:red;}

<i id="grid_view" onclick="grid_view();" class="fa fa-th-large m-l-5">Grid</i>
<i id="list_view" onclick="list_view();" class="fa fa-th-list m-l-5">List</i>
<ul id="cooking_result" class="recipes grid">
  <li></li>
  <li></li>
</ul>

I can add class="active" to i tag but I can't remove when I click to other i tag. May you help me to fix it? Also, If possible, may you simplify to javascript? I think it's too long for this functionality :)

Rounin · Accepted Answer · 2015-12-25 22:29:15Z

Here is a tidied up solution.

The main changes I've made:

I've fixed the underline disappear/reappear issue, using classList.toggle;
I've shortened the .js quite a lot;
I've added a cosmetic change to the CSS, using pointer:
I've removed the inline .js events from the HTMLand made the .js unobtrusive

Please ask questions in the comments below if there is anything that doesn't immediately seem clear to you.

var gridView = document.getElementById("grid_view");
var listView = document.getElementById("list_view");

function grid_view() {
	var cookingResult = document.getElementById("cooking_result");
	var gridView = document.getElementById("grid_view");
	var listView = document.getElementById("list_view");

    if (cookingResult.className === "recipes list") {
        cookingResult.className = "recipes grid";
        gridView.classList.toggle('active');
        listView.classList.toggle('active');
    }

}


function list_view() {
	var cookingResult = document.getElementById("cooking_result");
	var gridView = document.getElementById("grid_view");
	var listView = document.getElementById("list_view");

    if (cookingResult.className === "recipes grid") {
        cookingResult.className = "recipes list";
        gridView.classList.toggle('active');
        listView.classList.toggle('active');    
    }
    
}

gridView.addEventListener('click',grid_view,false);
listView.addEventListener('click',list_view,false);

.active {
text-decoration: underline;
}

.recipes.grid li {
float: left;
width: 50%;
height: 50px;
background: red;
}

.recipes.list li {
float: left;
width: 100%;
height: 50px;
background: red;
}

.recipes li:nth-of-type(2) {
background: blue;
}

#grid_view, #list_view {
cursor: pointer;
}

#grid_view.active, #list_view.active {
cursor: text;
}

<i id="grid_view" class="fa fa-th-large m-l-5 active">Grid</i>
<i id="list_view" class="fa fa-th-list m-l-5">List</i>
<ul id="cooking_result" class="recipes grid">
<li></li>
<li></li>
</ul>

Collectives™ on Stack Overflow

Javascript is adding active class but not remove when click other button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related