-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.

KasperDev
  • 83
  • 6

2 Answers2

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";});
    }
LiorP
  • 94
  • 4
  • *getElement**s**ByClassName* returns an HTMLCollection, not a single element. – RobG Jun 07 '17 at 08:17
  • you are right, i added forEach iteration. – LiorP Jun 07 '17 at 08:20
  • please write code more clear – Phu Duy Jun 07 '17 at 08:22
  • 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. – RobG Jun 07 '17 at 08:24
  • 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. – LiorP Jun 07 '17 at 08:30
  • hey LiorP thanks for the help, bet i cant for the life of me get it to work. bet Mr.T made some that works so thanks for time. – KasperDev Jun 07 '17 at 12:18
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.

Mr.T
  • 34
  • 6