HTML顯示此框中選擇

這是我第一次編程和一直在努力解決這個問題，該單選按鈕。搜索多個答案但仍然無法獲得結果。我試圖做的是，如果電臺「用戶名」中選擇顯示用戶名和密碼框，如果選擇的憑證單選按鈕顯示憑證盒。這裏是代碼，現在它會顯示所有的框。單選按鈕不起作用。謝謝。HTML顯示此框中選擇

<form action="" method="post"> 
<input type="radio" name="selectLogin" id="password" value="1" onclick = "choiceType()" checked />Username 
<input type="radio" name="selectLogin" id="voucher" value="0" onclick = "choiceType()" />Voucher 
</form> 

function choiceType() { 
if (document.getElementById('password').checked) { 
    <div id="login-box-name" style="margin-top:20px;">Username:</div><div id="login-box-field" style="margin-top:20px;"><input name="auth_user" type="text" class="form-login" title="Username" value="" size="30" maxlength="2048" /></div> 
    <div id="login-box-name" style="margin-top:20px;">Password:</div><div id="login-box-field" style="margin-top:20px;"><input name="auth_pass" type="password" class="form-login" title="Password" value="" size="30" maxlength="2048" /></div> 
    } else { 
    <div id="login-box-name" style="margin-top:20px;">Voucher:</div><div id="login-box-field" style="margin-top:20px;"><input name="auth_voucher" type="text" class="form-login" title="Voucher" value="" size="30" maxlength="2048" /></div> 
    } 
}

來源

2013-03-10 user2153908

JavaScript不喜歡PHP工作;你不只是將字符串回覆到DOM（大部分時間）。這甚至不是語法上有效的 - 看在瀏覽器的錯誤控制檯，你會看到錯誤消息。此外，它看起來像要呈現2個元素具有相同的ID，這是在HTML _also_無效的，因爲元素的ID必須是唯一的。你應該用[DOM API方法（https://developer.mozilla.org/en-US/docs/DOM）來控制HTML。 – 2013-03-10 14:27:14

<div id="voucherId" style="margin-top:20px;">Voucher:</div><div id="login-box-field" style="margin-top:20px;"><input name="auth_voucher" type="text" class="form-login" title="Voucher" value="" size="30" maxlength="2048" /></div> 

    <div id="userNameId" style="margin-top:20px;">Username:</div><div id="login-box-field" style="margin-top:20px;"><input name="auth_user" type="text" class="form-login" title="Username" value="" size="30" maxlength="2048" /></div> 
    <div id="passwordId" style="margin-top:20px;">Password:</div><div id="login-box-field" style="margin-top:20px;"><input name="auth_pass" type="password" class="form-login" title="Password" value="" size="30" maxlength="2048" /></div> 


    function choiceType() { 
      var inputs = document.getElementsByName("selectLogin"); 

      for (var i = 0; i < inputs.length; i++) { 
       if (inputs[i].checked) { 
        if(inputs[i].value =="1") 
          { 
          document.getElementById("voucherId").style.display = "block"; 
          document.getElementById("userNameId").style.display = "none"; 
          document.getElementById("passwordId").style.display = "none"; 

          } 

          else (inputs[i].value =="0") 
          { 
          document.getElementById("voucherId").style.display = "none"; 
          document.getElementById("userNameId").style.display = "block"; 
          document.getElementById("passwordId").style.display = "block"; 
          } 

         } 
        } 
}

來源

2013-03-10 14:27:56 PSR

謝謝。這是我正在尋找的。 – user2153908 2013-03-11 06:02:02

你必須使用：document.getElementById('you element id').innerHTML

document.getElementById('you element id').innerHTML='<div id="login-box-name" style="margin-top:20px;">Username:</div><div id="login-box-field" style="margin-top:20px;"><input name="auth_user" type="text" class="form-login" title="Username" value="" size="30" maxlength="2048" /></div><div id="login-box-name" style="margin-top:20px;">Password:</div><div id="login-box-field" style="margin-top:20px;"><input name="auth_pass" type="password" class="form-login" title="Password" value="" size="30" maxlength="2048" /></div>';

來源

2013-03-10 14:28:21

HTML顯示此框中選擇

回答

相關問題