2

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 に答える