Question

我正在尝试使用26个问题创建一种调查，并希望在单击“继续”按钮时更改显示的问题（保存在div中）。我现在尝试了几件事，但对我来说没什么用。我不能使用JQuery，因为最终产品必须在IE7中工作，而且我是编程方面的初学者，所以我有点被困在这里。

有关详细信息，请查看我的代码，我知道在html文件中使用JS并不是那么好但是对于这一小段代码我认为没问题。目前我只能在两个问题之间切换，如何才能增加2个以上的问题呢？

HTML结尾的脚本：

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="form-wrapper">
        <h1>Wie sehr (oder oft) wurden Sie in den letzten ZWEI Wochen von den folgenden Problmen belastet?</h1>
        <br>
        <br>         <!-- QUESTIONS -->
        <div id="Frage1" class="frage" style="display:block">1: Wenig Interesse oder Freude an Dingen und Aktivitäten.</div>
        <div id="Frage2" class="frage" style="display:none">2: Sich niedergeschlagen, depressiv oder hoffnungslos fühlen. </div> 
        <div id="Frage3" class="frage" style="display:none">3: Sich reizbarer, mürrischer oder ärgerlicher als gewöhnlich fühlen.</div>
        <br>                      <!-- ANSWER BUTTONS -->
        <form action="">
            <form class="form">
                <br>
                <section>
                    <div>
                        <input type="radio" id="control_01" name="select" value="0">
                        <label for="control_01">
                            <h2>Garnicht</h2>
                            <p>überhaupt nicht.</p>
                        </label>
                    </div>
                    <div>
                        <input type="radio" id="control_02" name="select" value="1">
                        <label for="control_02">
                            <h2>Kaum</h2>
                            <p>selten, an weniger als 1-2 Tagen</p>
                        </label>
                    </div>
                    <div>
                        <input type="radio" id="control_03" name="select" value="2">
                        <label for="control_03">
                            <h2>Leicht</h2>
                            <p>an mehreren Tagen.</p>
                        </label>
                    </div>
                    <div>
                        <input type="radio" id="control_04" name="select" value="3">
                        <label for="control_04">
                            <h2>Mittel</h2>
                            <p>An mehr als der Hälfte der Tage.</p>
                        </label>
                    </div>
                    <div>
                        <input type="radio" id="control_05" name="select" value="4">
                        <label for="control_05">
                            <h2>Stark</h2>
                            <p>An fast jedem Tag.</p>
                        </label>
                    </div>
                    <div>
                        <input type="radio" id="control_06" name="select" value="">
                        <label for="control_06">
                            <h2>KA</h2>
                            <p>Das möchte ich nicht beantworten.</p>
                        </label>
                    </div>
                </section>
                <button id="weiter" class="Weiter" name="submit" onclick="auswertung();replace();return false">Weiter</button>
            </form>
    </div>
    <!-- Wrapper ende -->
    <script>     <!-- change question script that needs to be reworked -->
        function replace() {
            document.getElementById("Frage1").style.display = "none";
            document.getElementById("Frage2").style.display = "block";
            document.getElementById("Frage3").style.display = "none";
        } 
    </script>

    <script>
        function auswertung() {
            var radios = document.getElementsByName('select');

            for (var i = 0, length = radios.length; i < length; i++) {
                if (radios[i].checked) {
                    // wohin der wert geschrieben wird
                    alert(radios[i].value);

                    break;
                }
            }
        }
    </script>
</body>

</html>

更改显示的div

0 个答案: