Search code examples
javascripthtmlcssstyles

Changing table style when changing radiobutton


Javascript:

function changeStylePruefung(radiobutton) {
    if (radiobutton.value === "stoerungsbehebung") {
        document.getElementById("table-stoerung").style.display = "block";
        document.getElementById("table-haupt").style.display = "none";
    } else {
        document.getElementById("table-stoerung").style.display = "none";
        document.getElementById("table-haupt").style.display = "block";
    }
}

HTML:

<fieldset id="uberpruefung">
                <legend style="font-weight: bold">Prüfung im Rahmen einer</legend>

                <div>

                    <label for="stoerungbeh">Störungsbehebung</label>
                    <input type="radio" id="stoerungbeh" name="pruefung" value="stoerungsbehebung" onchange="changeStylePruefung(this)"
                           checked><br>

                </div>

                <div>
                    <label for="hauptpruefung">Hauptprüfung</label>
                    <input type="radio" id="hauptpruefung" name="pruefung" value="hauptpruefung" onchange="changeStylePruefung(this)">
                </div>
            </fieldset>

            <br><br>

            <fieldset>
                <legend style="font-weight: bold">In Ordnung</legend>

                <div class='table-haupt' style="display: none">
                    <table class='rg-table' summary='Hed'>
                      .....
                    </table>
                </div>

                <div class='table-stoerung' style="display: block">
                    <table class='rg-table-stoerung' summary='Hed'>
                        .....
                    </table>
                </div>
            </fieldset>

I would like to change the style of a table if the radiobutton changes. But with that code it just do nothing.I looked up on several websites and tryed their way but it also didn't worked. Any ideas why?


Solution

  • You have defined the class of the Tables in the HTML file and you're searching for the ID of the Tables in the JavaScript code, that isn't available. So you should create the ID of the tables, with the same value Of The Table's class. You have used Class instead of ID, just this is the problem, replace class with id. This Will 100% Help You.