-2

How to change a class with Javascript using getElementsByClassName. I got it to work a little but it won't change the class one at the time bet only do it one time to.

I click the button to change css class it do it on all the div and I can do it more in one time.

Here is my Code

function Button_Color(Show_This) {
    var x = document.getElementById("Color_box");
    var i;
    var Show_This;

    if (Show_This == 1)
    {
        var d = document.getElementsByClassName("id_blue");
        d[0].className = "hid";

        var o = document.getElementsByClassName("id_red");
        o[0].className = " uhid";
    }
    if (Show_This == 2) {

            var d = document.getElementsByClassName("id_blue");
        d[0].className = "hid";

        var o = document.getElementsByClassName("id_red");
        o[0].className = " uhid";
    }


}

Here is a like to show you how it looks now with html css js https://jsfiddle.net/ee51o5h5/1/

I want it to show red only when you click the little red one and blue only when you click the little blue one.

i am dyslexic and from a non-english speaking country so sorry for any miss up.

Improve this question
1
  • Just Google 'change class pure js' Commented Jun 7, 2017 at 8:10

2 Answers 2

Reset to default
1

i try this : 

<body>

    <section class="section-button-box">
        <div class="box-button box-color01" onClick="Button_Color(1);">
        </div>

        <div class="box-button box-color02" onClick="Button_Color(2);">
        </div>

    </section>

    <section class="section-color-box" id="Color_box">

        <div class="main-color id_blue">
            <div class="box-size box-color01">
            </div>
        </div>

        <div class="main-color id_red">
            <div class="box-size box-color02">
            </div>
        </div>

        <div class="main-color id_blue">
            <div class="box-size box-color01">
            </div>
        </div>

        <div class="main-color id_red">
              <div class="box-size box-color02">
              </div>
        </div>

    </section>

</body>

JS: 

/*|  Blue box  |*/
    function Button_Color(Show_This) {
        var x = document.getElementById("Color_box");
        var i;
        var Show_This;
            var list = document.getElementsByClassName("main-color");
        for(var i = 0 ; i < list.length; i ++ ){
            if (Show_This == 1)
        {
                console.log(list[i].classList.contains("id_blue"));
            if(list[i].classList.contains("id_blue")){
                list[i].classList.add("uhid");
              list[i].classList.remove("hid");
            }
            if(list[i].classList.contains("id_red")){
                list[i].classList.add("hid");
              list[i].classList.remove("uhid");
            }
        }
        if (Show_This == 2) {
                console.log(list[i].classList.contains("id_blue"));
            if(list[i].classList.contains("id_blue")){
                list[i].classList.add("hid");
              list[i].classList.remove("uhid");
            }
            if(list[i].classList.contains("id_red")){
                list[i].classList.add("uhid");
              list[i].classList.remove("hid");
            }
        }
        }
    }

and css : 

/*|  Button Box  |*/
.section-button-box{
    height:100px;
    width:100%;
    background-color:aqua;
}
.box-button{
    height:50px;
    width:50px;
    float:left;
}

/*|  Color Box  |*/
.section-color-box{
    height:300px;
    background-color:#c1c1c1;
    width:100%;
}
.box-size{
    height:100px;
    width:100px;
    float:left;
}
.box-color01{
    background-color:blue;
}
.box-color02{
    background-color:red;
}

.hid , .hid .box-size {
    height:0px;
    width:0px;
}
.uhid{
    height:100px;
    width:100px;
}

i add something to your code . Hope to sovle your issue.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

This Works Thanks Alot m8.
1

you just need to find all elements in the desired class, iterate them and change their classes to the class that makes their color:

    if (Show_This == 1)
    {
        document.getElementsByClassName("box-color02").forEach(function(element){
        element.className = "box-size box-color01";});
    }
    if (Show_This == 2) 
    {
        document.getElementsByClassName("box-color01").forEach(function(element){
        element.className = "box-size box-color02";});
    }
Improve this answer

6 Comments

getElementsByClassName returns an HTMLCollection, not a single element.
you are right, i added forEach iteration.
please write code more clear
The forEach method of NodeList objects is not part of any W3C or WHATWG specification and is not well supported. By removing the initial class values (id_blue and id_red) this will only work once.
I changed it to the inner class, the one that make the color, now it's going to work every time. and about forEach, it's just an example of iteration, he can iterate however he want.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.