HTML 양식의 자바 스크립트 문제

javascript를 사용하여이 양식의 모양을 변경하여 각 라디오 버튼을 클릭하면 "본문"입력란의 크기가 변경됩니다. 문제는 라디오 버튼이 하나도 클릭되지 않았거나 입력 중 하나에 "checked"를 넣을 때만 작동한다는 것입니다. 어떤 경우에는 입력 된 입력 유형에서만 작동합니다. 여기 코드는 다음과 같습니다 샘플 코드에 오류가있다HTML 양식의 자바 스크립트 문제

<form action='add_note' method="POST"> 
    Title <input type="text" name="title" /><br /> 

    Body 
    <div id="note_input"> 
     <textarea id="note_input1" name="body" cols="27" rows="5"></textarea> 
    </div> 


    Type 

    <input type="radio" name="typey" value="text" onclick="text_input_type('text')" checked/> 
    Text 

    <input type="radio" name="typey" value="list" onclick="text_input_type('list')"/> 
    List 

    <input type="radio" name="typey" value="checklist" onclick="text_input_type('checklist')" /> 
    Checklist 

    <input type="submit" name="addnote" value="Add Note" /> 
</form> 

<script type="text/javascript"> 
function text_input_type(type) { 
    if (type=='list') { 
     document.getElementById("note_input").innerHTML= 
      "<input type=\"text\" id=\"note_input1\" name=\"body\">"; 
    } 
    if(type == 'checklist') { 
     document.getElementById("note_input").innerHTML= 
      "<input type=\"text\" id=\"note_input1\" name=\"body\">"; 
    } 
    if (type == 'text') { 
     document.getElementById("note_input").innerHTML= 
      "<textarea id=\"note_input1\" name=\"body\" cols=\"27\" rows=\"5\"> 
      </textarea>"; 
    } 
} 
</script>

출처

2012-01-13 Charles Murray

안녕 (outis에 의해 제안 스위치 케이스를 사용하여), 나는 당신을 위해 jsFiddle에이를 뒀다. 사람들에게 즉시 데모 및 팅커 기능을 제공하므로 다음에 사용하는 것이 좋습니다. –

jsfiddle와 같은 게시물 보관함을 사용하는 경우 SO Q & As는 독립형으로 사용되므로 여전히 SO에 코드를 게시해야합니다. – outis

['
'] (http://brainstormsandraves.com/articles/semantics/structure/#br)은 거의 [의미 론적] 것이 아닙니다 (http://webstyleguide.com/wsg3/5-site-structure/2-semantic- markup.html); 단락이나 [list] (http://www.w3.org/TR/html401/struct/lists.html) 요소와 같이 좀 더 적절한 것을 사용하십시오. 의미 론적 HTML의 주제에서 입력 레이블 텍스트는 ''요소에 있어야합니다. – outis

, 아래로 새 줄을 시작해서는 안 :

"<textarea id=\"note_input1\" name=\"body\" cols=\"27\" rows=\"5\"> 
</textarea>";

출처

2012-01-13 09:33:20 Blindsniper

어떤 새로운 라인을 언급하고 있습니까? –

죄송합니다. 지금 바로보실 수 있습니다. – Blindsniper

예. 방화 광에서이 줄에 오류가 표시됩니다. 그것은 한 줄에 있어야합니다. –

당신이 사용자 jQuery를 허용하는 경우. 그것은 매우 간단 해집니다. jQuery를 사용하려는 경우에만 평가판 아래에 코드가 있습니다. http://jsfiddle.net/bsLBm/ :

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function(){ 
    $("input[type='radio']").click(function(){  
    var type=$(this).attr('value'); 
    var target=$("#note_input"); 
    switch(type){ 
    case 'list': 
     target.html("<input type=\"text\" id=\"note_input1\" name=\"body\">"); 
    break; 
    case 'checklist': 
     target.html("<input type=\"text\" id=\"note_input1\" name=\"body\">"); 
    break; 
    case 'text': 
    target.html("<textarea id=\"note_input1\" name=\"body\" cols=\"27\" rows=\"5\"></textarea>"); 
    break; 
    }; 
    }); 
}); 
</script> 
</head> 
<body> 
<form action='add_note' method="POST"> 
    Title <input type="text" name="title" /><br /> 
    Body 
    <div id="note_input"> 
     <textarea id="note_input1" name="body" cols="27" rows="5"></textarea> 
    </div> 
    Type 
    <input type="radio" name="typey" value="text"/> 
    Text 
    <input type="radio" name="typey" value="list"/> 
    List 
    <input type="radio" name="typey" value="checklist"/> 
    Checklist 
    <input type="submit" name="addnote" value="Add Note"/> 
</form> 
</body> 
</html>

출처

2012-01-13 09:45:00

어떤 이유로 든 문제가 해결되지 않습니다 ... –

@CharlesMurray, pls는 무엇이 언제 작동하지 않는지 설명합니다. 위의 코드는 논리에 따라 작동합니다. –

HTML 양식의 자바 스크립트 문제

답변

관련 문제