Changing table style when changing radiobutton-CodePudding

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?

CodePudding user response：

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.

CodePudding user response：

If i was approaching this my first point of call would be to look to see where and what is calling this function, firstly this is the deceleration of a function, not the invocation of a function. So where are you calling this function - is it in a html page or js file in your app?

I would step through the expectations of where it is called, console.log radiobutton in the first line of your function, then radiobutton.value, then document, then document.getElementById("table-stoerung") and keep going until you understand the scope of your function.

You need to step through incrementally and just debug - there is nothing wrong with this code, it may be that document does not have elements with these ids or one of these props is missing. That said having an else condition to get an element id is not recommended.