HTML：選択に基づいて2つのうちの1つだけを表示する

Question

html + js（2つのラジオボタン）を使用して2つのデータセットのうち1つを表示したい。

次のコードを使用してみましたが、ラジオボタンをクリックしても何も起こりません。

HTML：

<form name="myForm"> 
       <input type="radio" name="table1" value="table1" onclick="handleClick(this);" checked> Quarter 
       <input type="radio" name="table2" value="table2" onclick="handleClick(this);"> Month<br>    
</form> 

JS：

document.getElementById("datatable1").style.display = ""; //Show the table 
    document.getElementById("datatable2").style.display = "none"; //Hide the table 

function handleClick(myRadio) { 
    if (myRadio.value == "table2"){ 
     document.getElementById("datatable1").style.display = "none"; 
     document.getElementById("datatable2").style.display = ""; 
    } 
    else{ 
     document.getElementById("datatable1").style.display = ""; 
     document.getElementById("datatable2").style.display = "none"; 
    } 
} 

Answer 1

ここでワーキングソリューションです。それが役に立てば幸い！

document.getElementById("datatable1").style.display = ""; //Show the table 
 
    document.getElementById("datatable2").style.display = "none"; //Hide the table 
 

 
    function handleClick(myRadio) { 
 
     if (myRadio.value == "table2"){ 
 
      document.getElementById("datatable1").style.display = "none"; 
 
      document.getElementById("datatable2").style.display = ""; 
 
     } 
 
     else{ 
 
      document.getElementById("datatable1").style.display = ""; 
 
      document.getElementById("datatable2").style.display = "none"; 
 
     } 
 
    }

table{ 
 
     width: 80px; 
 
     hight: 80px; 
 
     border: 1px solid #000000; 
 
    }

<form name="myForm"> 
 
    <input type="radio" name="table1" value="table1" onclick="handleClick(this);" checked> Quarter 
 
    <input type="radio" name="table1" value="table2" onclick="handleClick(this);"> Month<br> 
 
</form> 
 

 
<table id="datatable1"> 
 
    <tr> 
 
     <td>Table 1</td> 
 
    </tr> 
 
</table> 
 
<table id="datatable2"> 
 
    <tr> 
 
     <td>Table 2</td> 
 
    </tr> 
 
</table>

Answer 2

次のようにウルのJSを変更してください：

document.getElementById("datatable1").style.display = "block" //Show the table 
document.getElementById("datatable2").style.display = "none"; //Hide the table 

function handleClick(myRadio) { 
if (myRadio.value == "table2"){ 
    document.getElementById("datatable1").style.display = "none"; 
    document.getElementById("datatable2").style.display = "block" ; 
} 
else{ 
    document.getElementById("datatable1").style.display = "block" ; 
    document.getElementById("datatable2").style.display = "none"; 
} 
}