0

エキスパート ボタンを選択するとテキスト ボックスが表示され、学習者ボタンをクリックするとテキスト ボックスが表示されないようにするプロジェクトを作成しようとしています。

私はこのコードを書きましたが、問題を解決できません...助けてください...

<html>
<head>
<script language="javascript"> 

function toggleContent(showHideDiv, switchTextDiv) {
    var text = document.getElementById(showHideDiv);
    var ele = document.getElementById(switchTextDiv);
    var rad_val='';
    for (var i=0; i < document.text.role.length; i++)
    {
        if (document.text.role[i].checked)
        {
            rad_val = document.text.role[i].value;
        }
    }   

    if(rad_val=='learner'){
            ele.style.display = "block";
    }
    else {
        ele.style.display = "none";
    }
}
</script>
</head>
<body>
<table>
  <tr >
    <td  ><option value="1"> 1 </option>
    </td>
    <td> Role </td>
    <form id="form1">
      <td><label>
        <input type="radio" name="role" value='learner' onClick="toggleContent('form1','div1')" >
        Learner </label>
      </td>
      <td><label>
        <input type="radio" name="role" value='expert' onClick="toggleContent('form1','div1')" >
        Expert </label>
    </form>
<td ><div ID="div1" align=right style="display:none;">
        <label class="labell labelUser" >why?</label>
        <textarea name="description" align="right" id="description"  cols="40" rows="5" class="inputbox">Why?</textarea>
        <span id="descriptionError" class="notifyForUser" spanError></span> </div></td>  
  </tr>
  <tr >
    <td  ><option value="2"> 2 </option>
    </td>
    <td> Role </td>
    <form id="form2">
      <td><label>
        <input type="radio" name="role" value='learner' onClick=toggleContent('form2','div2') >
        Learner </label>
      </td>
      <td><label>
        <input type="radio" name="role" value='expert' onClick=toggleContent('form2','div2') >
        Expert </label>
      </td>
    </form>
    <td ><div ID="div2" align=right style="display:none;">
        <label class="labell labelUser" >why?</label>
        <textarea name="description" align="right" id="description"  cols="40" rows="5" class="inputbox">Why?</textarea>
        <span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
  </tr>
</table>
</body>
</html>
4

4 に答える 4

0 
if(rad_val=='learner'){ 
        ele.style.display = "block"; 
} 
else { 
    ele.style.display = "none"; 
}

学習者に等しい値はありませんが、learner1またはlearner2

これを試して：

function toggleContent(showHideDiv, switchTextDiv) {
    var text = document.getElementById(showHideDiv);
    var ele = document.getElementById(switchTextDiv);
    var rad_val = '';
    var pattern = /\d+/g;
    var a=pattern.exec(showHideDiv);

    for (var i = 0; i < document.forms[showHideDiv].role.length; i++) {
        if (document.forms[showHideDiv].role[i].checked) {
            rad_val = document.forms[showHideDiv].role[i].value;
        }
    }
    if (rad_val == 'learner' + a) {

        ele.style.display = "block";
    }
    else {

        ele.style.display = "none";
    }
}
于 2012-06-07T06:59:42.953 に答える
0

これが解決策です。私の問題を解決してくれた@dragon66に感謝します。 

function toggleContent(showHideDiv, switchTextDiv) {
    var text = document.getElementById(showHideDiv);
    var ele = document.getElementById(switchTextDiv);
    var rad_val='';
    for (var i=0; i < text.role.length; i++)
    {
        if (text.role[i].checked)
        {
            rad_val = text.role[i].value;
        }
    }   

    if(rad_val=='learner'){
            ele.style.display = "block";
    }
    else {
        ele.style.display = "none";
    }
}
</script>
</head>
<body>
<table>
  <tr >
    <td  ><option value="1"> 1 </option>
    </td>
    <td> Role </td>
    <form id="form1">
      <td><label>
        <input type="radio" name="role" value='learner' onClick="toggleContent('form1','div1')" >
        Learner </label>
      </td>
      <td><label>
        <input type="radio" name="role" value='expert' onClick="toggleContent('form1','div1')" >
        Expert </label>
    </form>
<td ><div ID="div1" align=right style="display:none;">
        <label class="labell labelUser" >why?</label>
        <textarea name="description" align="right" id="description"  cols="40" rows="5" class="inputbox">Why?</textarea>
        <span id="descriptionError" class="notifyForUser" spanError></span> </div></td>  
  </tr>
  <tr >
    <td  ><option value="2"> 2 </option>
    </td>
    <td> Role </td>
    <form id="form2">
      <td><label>
        <input type="radio" name="role" value='learner' onClick=toggleContent('form2','div2') >
        Learner </label>
      </td>
      <td><label>
        <input type="radio" name="role" value='expert' onClick=toggleContent('form2','div2') >
        Expert </label>
      </td>
    </form>
    <td ><div ID="div2" align=right style="display:none;">
        <label class="labell labelUser" >why?</label>
        <textarea name="description" align="right" id="description"  cols="40" rows="5" class="inputbox">Why?</textarea>
        <span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
  </tr>
</table>
</body>
</html>
于 2012-06-18T15:33:05.363 に答える
0

あなたはこのようにすることができます：

<script language="javascript"> 
function toggleContent(showHideDiv, switchTextDiv) {
var text = document.getElementById(showHideDiv);
var ele = document.getElementById(switchTextDiv);
var rad_val='';
var obj=text.getElementsByTagName("input");
for (var i=0; i < obj.length; i++)
{
    if (obj[i].checked)
    {
        rad_val = obj[i].value;
    }
}  
if(rad_val.indexOf("learner")!=-1){
        ele.style.display = "block";
}
else {
    ele.style.display = "none";
}
}
</script>
于 2012-06-07T07:09:49.770 に答える
0

コードのロジックとフォーム要素を取得する方法に誤りがあります。

コードを修正する代わりに、ロジック全体を修正することをお勧めします。

各入力タグ内からインラインではなく、コードを介してクリック イベントをバインドすることをお勧めします。また、ラジオ ボタンをクリックした後 (キーボードでの選択からもトリガーされます)、ラジオ グループ全体の選択された値がクリックされたボタンの値であることを確認できます。

同じ効果を得るために必要なコードは次のとおりです。

window.onload = function() {
    var oDiv = document.getElementById("div2");
    var arrRoleButtons = document.getElementsByName("role");
    for (var i = 0; i < arrRoleButtons.length; i++) {
        var oCurrentRole = arrRoleButtons[i];
        oCurrentRole.onclick = function() {
            oDiv.style.display = (this.value === 'learner') ? "block" : "none"; 
        }
    }
};

onclickこれにより、タグ内から呼び出す必要がなくなりました。

<input type="radio" name="role" value='learner' />
<input type="radio" name="role" value='expert' />

ライブ テスト ケース。

于 2012-06-07T07:15:38.050 に答える