選択と変更

Question

<form> 
    <input type="radio" name="if" value="mag" onclick="mag">MAG</input> 
    <input type="radio" name="if" value="ceg" onclick="ceg">CEG</input> 
</form> 

<form class="mag1" action="includes/signup.ini.php" methode="POST"> 
    <input type="text" name="first">1</input> 
</form> 

<form class="ceg1" action="includes/signup.ini.php" methode="POST"> 
    <input type="text" name="first">2</input> 
</form> 

<script> 
    function mag() { 
     document.getElementByClassName("mag1").style.display="block"; 
    } 
</script> 

私は表示をnoneに設定しました。しかし、スクリプトは私の仕事ではなく、何もしません。

Answer 1

セレクタメソッド名にsがありません。これは要素のコレクションを返しますが、インデックスを使用してコレクションから最初の要素を取得する必要があります。

function mag() { 
    document.getElementsByClassName("mag1")[0].style.display="block"; 
    //    -^-     -^^^- 
} 

---

またはその代わりにDocument#querySelectorメソッドを使用します。

function mag() { 
    document.querySelector(".mag1").style.display="block"; 
} 

---

あなたはonclick属性値内の機能を呼び出す必要がありますが。

<form> 
    <input type="radio" name="if" value="mag" onclick="mag()">MAG 
    <input type="radio" name="if" value="ceg" onclick="ceg()">CEG 
</form> 

FYI：inputタグがselfclosingタグなので、</input>は（ちょうどそれを取り除く）は無効です。

---

UPDATE 1：あなたが視界を切り替えたい場合は、上記のコードでは十分ではありません。

.ceg1, 
 
.mag1 { 
 
    display: none 
 
}

<script> 
 
    function mag(ele) { 
 
    document.querySelector(".mag1").style.display = ele.checked ? "block" : "none"; 
 
    document.querySelector(".ceg1").style.display = ele.checked ? "none" : "block"; 
 
    } 
 

 
    function ceg(ele) { 
 
    document.querySelector(".ceg1").style.display = ele.checked ? "block" : "none"; 
 
    document.querySelector(".mag1").style.display = ele.checked ? "none" : "block"; 
 
    } 
 
</script> 
 
<form> 
 
    <input type="radio" name="if" value="mag" onchange="mag(this)">MAG 
 
    <input type="radio" name="if" value="ceg" onchange="ceg(this)">CEG 
 
</form> 
 

 
<form class="mag1" action="includes/signup.ini.php" method="POST"> 
 
    <input type="text" name="first">1 
 
</form> 
 

 
<form class="ceg1" action="includes/signup.ini.php" method="POST"> 
 
    <input type="text" name="first">2 
 
</form>

---

UPDATE 2：またはチェック値に基づいて、共通機能と更新表示プロパティを使用し、これはそれを行うには良い方法だろう。

.ceg1, 
 
.mag1 { 
 
    display: none 
 
}

<script> 
 
    function toggle(ele) { 
 
    document.querySelector(".mag1").style.display = ele.value == 'mag' ? "block" : "none"; 
 
    document.querySelector(".ceg1").style.display = ele.value == 'ceg' ? "block" : "none"; 
 
    } 
 
</script> 
 
<form> 
 
    <input type="radio" name="if" value="mag" onchange="toggle(this)">MAG 
 
    <input type="radio" name="if" value="ceg" onchange="toggle(this)">CEG 
 
</form> 
 

 
<form class="mag1" action="includes/signup.ini.php" method="POST"> 
 
    <input type="text" name="first">1 
 
</form> 
 

 
<form class="ceg1" action="includes/signup.ini.php" method="POST"> 
 
    <input type="text" name="first">2 
 
</form>