JS html css change css need to understand

Question

I try to change css by js, but the script change css one time only, after, stop working. Some one can help me?

    <html>
    <script>
    function cambio_eff(a){

        if (a == '1'){
        effect01.id = 'effect01';
        effect02.id = 'effect01';
        effect03.id = 'effect01';

        }
        if (a == '2'){
        effect01.id = 'effect02';
        effect02.id = 'effect02';
        effect03.id = 'effect02';
        }
        if (a == '3'){
        effect01.id = 'effect03';
        effect02.id = 'effect03';
        effect03.id = 'effect03';
        }
    }

    </script>
    </head>

    <body>
    ...
<div id="effect01">
    <button id="efi01" onClick="cambio_eff('1');" >AndV1x1b(default)</button><br><br>
    <button id="efi02" onClick="cambio_eff('2');">And2x2ch</button>
    <button id="efi03" onClick="cambio_eff('3');">And2x2ch</button>
</div>
    ...

    </body>

    </html>

This over, it is the code. Thanks for helping.

Answer 1

The id is intended to be a globally unique attribute and not one that you can change or assign to multiple elements. Try using the class attribute like this:

<html>
<head>
</head>
<body>
    <ul>
        <li><button id="efi01">AndV1x1b(default)</button></li>
        <li><button id="efi02">And2x2ch</button></li>
        <li><button id="efi03">And2x2ch</button></li>
    </ul>

    <div id="box01" class="effect01">
        <h2>Box 1</h2>
    </div>

    <div id="box02" class="effect01">
        <h2>Box 2</h2>
    </div>

    <div id="box03" class="effect01">
        <h2>Box 3</h2>
    </div>

    <script>
        function cambio_eff(a, e) {
            var box01 = document.getElementById("box01");
            var box02 = document.getElementById("box02");
            var box03 = document.getElementById("box03");

            if (a == "1") {
                box01.className = "effect01";
                box02.className = "effect01";
                box03.className = "effect01";

            } else if (a == "2") {
                box01.className = "effect02";
                box02.className = "effect02";
                box03.className = "effect02";

            } else if (a == "3") {
                box01.className = "effect03";
                box02.className = "effect03";
                box03.className = "effect03";

            }

        }

        document.getElementById("efi01").onclick = function(e){cambio_eff(1);};
        document.getElementById("efi02").onclick = function(e){cambio_eff(2);};
        document.getElementById("efi03").onclick = function(e){cambio_eff(3);};
    </script>
</body>

Working Example: https://jsfiddle.net/uh2ort0r/3/

JS html css change css need to understand

Question

1 answers

solution1
0 2016-07-22 17:30:18

JS html css change css need to understand

Question

1 answers

solution1 0 2016-07-22 17:30:18

solution1
0 2016-07-22 17:30:18