一问一答，通过按钮切换显示的htm页面 - 编程论坛

wp2319572020-01-20 14:21

回复楼主 maku1987

程序代码：

wp2319572020-01-20 15:14

回复楼主 maku1987

或者，修改了一下，由原来的3个按钮变成2个按钮其中一个公用

程序代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn. </script>
<title>随机测试案例</title>
</head>
<body>

    <button  onclick="foo2()" >随便问问</button>
    <button id="t3" onclick="foo3()" >查看答案</button>
    <br><br>
    <div id=q2 style="display:none;"></div><br>
    <div id=a2 style="display:none;"></div>
    <script>
        function foo2()
        {
           document.getElementById("a2").style="display:none;";
           document.getElementById("t3").innerHTML="查看答案";
           idx=Math.floor(Math.random()*6);
           lst=["1+1=?","2*8=?","36-89=?","789/2=?","45*89=?","36+987=?"];
           lsta=[2,16,-53,394.5,4005,1023];
           document.getElementById("q2").style="display:block;";
           document.getElementById("q2").innerHTML=lst[idx];
        }
        function foo3()
        {
           if(document.getElementById("q2").style["display"]==="none")
           {
              alert("没有问题呢,怎么回答?");
              return;
           }
           text=event.target.innerHTML;
           if (text==="隐藏答案")
           {
              document.getElementById("a2").style="display:none;";
              event.target.innerHTML="查看答案";
           }
           else
           {
              document.getElementById("a2").style="display:block;";
              document.getElementById("a2").innerHTML=lsta[idx];
              event.target.innerHTML="隐藏答案";
           }
        }
        function foo4()
        {
           document.getElementById("a2").style="display:none;";
        }
    </script>
</body>
</html>