2

在第二个表单替换原始表单后，我试图通过按钮返回原始表单。对 JS 来说很新，但我对它应该如何工作有很好的理解。这是我的例子：

<!DOCTYPE html>
<html>
<center>
<head>
<title>Test2</title>
<script>
    function formReset()
    {
        document.getElementById("table").innerHTML = "???";
    }
    function nextPage()
    {
        if (document.getElementById("1").checked == true){
            document.getElementById("main").innerHTML = document.getElementById("test1").innerHTML;}
            else
        if (document.getElementById("2").checked == true){
            document.getElementById("main").innerHTML = document.getElementById("test2").innerHTML;}
            else
        if (document.getElementById("3").checked == true){
            document.getElementById("main").innerHTML = document.getElementById("test3").innerHTML;}
        return true;
    }
</script>
</head>
    <body>
     <h1>This is a test of the radio buttons</h1>
     <br />
     <div name="table" id="table">
    <form name="main" id="main">
        <input type="radio" name="grp1" id="1">1<br>
        <input type="radio" name="grp1" id="2">2<br>
        <input type="radio" name="grp1" id="3">3<br>
        <br />
        <input type="button" name="button" value="Next" onClick="nextPage()">
    </form>
</div>
<br />
<div name="test1" id="test1" style="display:none">
    <h2>You chose<br />1</h2>
    <input type="button" value="Reset" id="reset_form" onClick="formReset()">
</div>
<div name="test2" id="test2" style="display:none">
    <h2>You chose<br />2</h2>
    <input type="button" value="Reset" id="reset_form" onClick="formReset()">
</div>
<div name="test3" id="test3" style="display:none">
    <h2>You chose<br />3</h2>
    <input type="button" value="Reset" id="reset_form" onClick="formReset()">
</div>
</body>
</center>
</html>

当问号显示时，那是我需要显示原始表单(id="main") 的时候。

我期望： document.getElementById("table").innerHTML = document.getElementById("main").innerHTML; 工作，但它没有。任何帮助将不胜感激，因为我几天来一直在寻找解决方案。

4

1 回答 1

1

请试试这个

<!DOCTYPE html>
<html>
<center>
<head>
<title>Test2</title>
<script>
    function formReset()
    {
        document.getElementById("final").innerHTML ="";
        document.getElementById("normal").style.display = 'block';
    }
    function nextPage()
    {
        if (document.getElementById("1").checked == true){
            document.getElementById("final").innerHTML = document.getElementById("test1").innerHTML;
            document.getElementById("normal").style.display = 'none';
            }
            else
        if (document.getElementById("2").checked == true){
            document.getElementById("final").innerHTML = document.getElementById("test2").innerHTML;
            document.getElementById("normal").style.display = 'none';
            }
            else
        if (document.getElementById("3").checked == true){
            document.getElementById("final").innerHTML = document.getElementById("test3").innerHTML;
            document.getElementById("normal").style.display = 'none';
            }
        return true;
    }
</script>
</head>
    <body>
     <h1>This is a test of the radio buttons</h1>
     <br />
     <div name="table" id="table">
    <form name="main" id="main">
        <div id="final"></div>
        <div id="normal">
        <input type="radio" name="grp1" id="1">1<br>
        <input type="radio" name="grp1" id="2">2<br>
        <input type="radio" name="grp1" id="3">3<br>
        <br />
        <input type="button" name="button" value="Next" onClick="nextPage()">
        </div>
    </form>
</div>
<br />
<div name="test1" id="test1" style="display:none">
    <h2>You chose<br />1</h2>
    <input type="button" value="Reset" id="reset_form" onClick="formReset()">
</div>
<div name="test2" id="test2" style="display:none">
    <h2>You chose<br />2</h2>
    <input type="button" value="Reset" id="reset_form" onClick="formReset()">
</div>
<div name="test3" id="test3" style="display:none">
    <h2>You chose<br />3</h2>
    <input type="button" value="Reset" id="reset_form" onClick="formReset()">
</div>
</body>
</center>
</html>
于 2012-10-26T21:34:34.470 回答