Question

我为我的侄子写了一个星球大战测验。在发布图片和问题之后我想清除屏幕并发布另一张图片和问题，但我似乎无法做到这一点。我哪里错了？这是我到目前为止的代码。它基本上可以同时打印两个问题。

<!doctype html>
<html>
<head>
    <title> Star Wars Quiz</title>
    <style>
        body {
            font-family:sans-serif;
            text-align:center;
        }
        form {
            margin:0 auto;
            width:500px;
           text-align:left;
        }
    </style>
 </head>
 <body>
<img src="http://i.imgur.com/xkdHqSM.jpg" width="500" height="500" />
    <form name="form1" method="post" action="">

        <p>What is this?</p>
        <p>
            <label><input type="radio" name="star" value="1" 
                onclick="answer(this);">The DeathStar</label>
        </p>
        <p>
            <label><input type="radio" name="star" value="2" 
                    onclick="answer(this);">Tatooine</label>
        </p>
        <p>
            <label><input type="radio" name="star" value="3" 
                    onclick="answer(this);">Peppa Pigs House</label>
        </p>

    </form>
    <script>
        var globalScore = 0;

        function answer(selectedButton) {
            var score = document.getElementById("score");

            if (selectedButton.value == "1") {

                //document.body.innerHTML = "";//clear screen
                globalScore += 1;
            } 



            score.value = globalScore;

        }
    </script>   
    <p id="quest2">
    <img src="http://i.imgur.com/hee2oSS.png" width="500" height="500" />
         <form name="form2" method="post" action="">

        <p>What is this?</p>
        <p>
            <label><input type="radio" name="star" value="1" 
                onclick="answer(this);">a Bow Fighter</label>
        </p>
        <p>
            <label><input type="radio" name="star" value="2" 
                    onclick="answer(this);">a Tie Fighter</label>
        </p>
        <p>
            <label><input type="radio" name="star" value="3" 
                    onclick="answer(this);">a Street Fighter</label>
        </p>

        </p>
    </form>

Answer 1

您可以使用此..但我认为您想要遵循的方式变化很大，对您的项目效率不高。但我已经更正了你的代码..请检查。

<!doctype html>
<html>
<head>
    <title> Star Wars Quiz</title>
    <style>
        body {
            font-family:sans-serif;
            text-align:center;
        }
        form {
            margin:0 auto;
            width:500px;
       text-align:left;
    }


 </style>
 </head>
 <body>
<div id="score"></div>
<div id="quest1">
<img src="http://i.imgur.com/xkdHqSM.jpg" width="500" height="500" />
    <form name="form1" method="post" action="">

        <p>What is this?</p>
    <p>
        <label><input type="radio" name="star" value="1" 
            onclick="answer(this);">The DeathStar</label>
    </p>
    <p>
        <label><input type="radio" name="star" value="2" 
                onclick="answer(this);">Tatooine</label>
    </p>
    <p>
        <label><input type="radio" name="star" value="3" 


                  onclick="answer(this);">Peppa Pigs House</label>
        </p>

    </form>
</div>
    <script>


          var globalScore = 0;

        function answer(selectedButton) {
            var score = document.getElementById("score");

            if (selectedButton.value == "1") {

                //document.body.innerHTML = "";//clear screen
                globalScore += 1;
            } 


        score.innerHTML = globalScore;
    document.getElementById('quest1').style.display='none';
    document.getElementById('quest2').style.display='block';
    }
</script>   
<div id="quest2" style="display:none;">
<img src="http://i.imgur.com/hee2oSS.png" width="500" height="500" />
     <form name="form2" method="post" action="">

    <p>What is this?</p>
    <p>
        <label><input type="radio" name="star" value="1" 
            onclick="answer(this);">a Bow Fighter</label>
    </p>
    <p>
        <label><input type="radio" name="star" value="2" 
                onclick="answer(this);">a Tie Fighter</label>
    </p>
    <p>


           <label><input type="radio" name="star" value="3" 
                    onclick="answer(this);">a Street Fighter</label>
        </p>


    </form>
 </div>

Answer 2

对你的侄子来说这将是一个有趣的测验:)我对你的代码做了一些修复。希望它能帮助你制作一款精彩的游戏。我改变了几个地方。我还添加了一些CSS来显示当前的问题：

CSS

.question {
    display: none;
}
.question.show {
    display: block;
}

并修改了JS：

var globalScore = 0,
    score = document.getElementById("score"),
    current = document.getElementsByClassName("show");

function answer(selectedButton) {

    var form = selectedButton.form,
        number = +form.parentNode.getAttribute('data-question');

    // Validate answer logic?
    if (selectedButton.value == "1") {
        globalScore += 1;
        nextQuestion(number + 1);
    }
    else {
        alert('Incorrect');
    }

    score.innerHTML = globalScore;
}

function nextQuestion(number) {
    if (current[0]) current[0].className = "question";
    document.getElementById('quest' + number).className += ' show';
}

但是我不知道你将如何验证答案。

演示：http://jsfiddle.net/6P8ss/

Answer 3

经过您的许可，Dev John：

<!doctype html>
<html>
<head>
    <title> Star Wars Quiz</title>
    <style>
        body {
            font-family:sans-serif;
            text-align:center;
        }
        form {
            margin:0 auto;
            width:500px;
       text-align:left;
    }


 </style>
 </head>
 <body>
<div id="score"></div>
<div id="quest1">
<img src="http://i.imgur.com/xkdHqSM.jpg" width="500" height="500" />
    <form name="form1" method="post" action="">

        <p>What is this?</p>
    <p>
        <label><input type="radio" name="star" value="1" 
            onclick="answer(this, 1);">The DeathStar</label>
    </p>
    <p>
        <label><input type="radio" name="star" value="2" 
                onclick="answer(this,1);">Tatooine</label>
    </p>
    <p>
        <label><input type="radio" name="star" value="3" 


                  onclick="answer(this,1);">Peppa Pigs House</label>
        </p>

    </form>
</div>
    <script>


          var globalScore = 0;

        function answer(selectedButton, intForm) {
            var score = document.getElementById("score");

            if (selectedButton.value == "1") {

                //document.body.innerHTML = "";//clear screen
                globalScore += 1;
            } 


        score.innerHTML = globalScore;
    document.getElementById('quest' + intForm).style.display='none';
    }
</script>   
<div id="quest2">
<img src="http://i.imgur.com/hee2oSS.png" width="500" height="500" />
     <form name="form2" method="post" action="">

    <p>What is this?</p>
    <p>
        <label><input type="radio" name="star" value="2" 
            onclick="answer(this,2);">a Bow Fighter</label>
    </p>
    <p>
        <label><input type="radio" name="star" value="1" 
                onclick="answer(this,2);">a Tie Fighter</label>
    </p>
    <p>


           <label><input type="radio" name="star" value="3" 
                    onclick="answer(this,2);">a Street Fighter</label>
        </p>


    </form>
 </div>

提出您的问题，并确保将值= 1设置为获胜答案。

DEMO ：http://jsfiddle.net/andynedine/Lms7p/

选中单选按钮后清除屏幕

3 个答案:

演示：http://jsfiddle.net/6P8ss/