텍스트 영역이 비어있는 경우 버튼을 숨기는 Javascript 기능이 작동하지 않습니다.

Question

div 아래에 선택 드롭 다운이있는 텍스트 영역이 있습니다. 그 아래에는 두 개의 버튼이 있습니다. 하나는 미리보기이고, 다른 하나는 텍스트를 파일로 업로드하는 것입니다. 텍스트 영역이 비어있는 경우 업로드 버튼을 숨기려고합니다. 내 자바 스크립트는 항상 버튼을 숨기기 때문에 작동하지 않습니다. 자신의 JSFiddle에 링크

<div class="container"> 
<label for="text-area">Paste your code here: </label> 
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>"> 
    <textarea name="code_input" id="code_textarea" class="form-control" rows="15" placeholder="Start coding!" required><?= isset($_POST['code_input']) ? $_POST['code_input'] : '' ?></textarea> 
    <div class="button-container"> 
     <select required name="language-select" class="form-control" id="language_selector"> 
      <option value="" selected disabled>Language</option> 
      <option>20 options follow</option> 
<!-- THIS WILL KEEP THE VALUE IN THE DROPDOWN AFTER SUBMIT --> 
      <script type="text/javascript"> 
       document.getElementById('language_selector').value = "<?php echo $_POST['language-select'];?>"; 
      </script> 
     </select> 
     <br/> 
     <br/> 
     <div id="button-container" class="btn-toolbar"> 
      <button id="drive_submit_btn" class="btn btn-md" type="submit">Preview</button> 
      <button id="upload_btn" class="btn btn-md" type="submit">Upload</button> 
     </div> 
    </div> 
</form> 
<div class="show-code"> 
    <script src="lib/prism.js"></script> 
    <!-- THIS DISPLAYS THE CODE AFTER SUBMITTING USING THE PRISM.JS PLUGIN FOR SYNTAX HIGHLIGHTING --> 
    <!-- Get language selection from dropdown and append it to language class. Echo the text as highlighted code --> 
    <pre><code class="language-<?php echo $language ?>"><?php echo $user_code; ?></code></pre> 
</div> 
    </div> 


<!-- THIS IS THE JAVASCRIPT TO HIDE THE BUTTON UNTIL TEXT IS ENTERED.--> 
<!-- HOWEVER IT ALWAYS HIDES IT!! --> 

<script> 
$(document).ready(function() { 
/* I EVEN TRIED TO TRIM IT TO NO AVAIL */ 
    var content = $.trim($('#code_textarea').val()); 
    if(content.length === 0) { 
     $('#upload_btn').hide(); 
    } else { 
     $('#upload_btn').show(); 
    } 
}); 
</script> 

내가 본 많은 답변 : 여기

은 (20 그들을 있기 때문에 왼쪽으로 모든 옵션 포함) 양식, 버튼 컨테이너를 선택 드롭 다운입니다 , 그리고 그들은 모두 잘 작동합니다. 무슨 일로 광산이 제대로 작동하지 않습니까? 내 모든 JS 기능을 제외하고 잘 작동합니다.

Answer 1

핸들러를 textarea의 'keyup'이벤트에 연결하십시오. (그리고 눈에 보이지 않는 BTN로 시작합니다.) 자바 스크립트 솔루션

$(document).keyup('.code_textarea',function() { 
 
/* I EVEN TRIED TO TRIM IT TO NO AVAIL */ 
 
    var content = $.trim($('#code_textarea').val()); 
 
    if(content.length === 0) { 
 
     $('#upload_btn').hide(); 
 
    } else { 
 
     $('#upload_btn').show(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
<label for="text-area">Paste your code here: </label> 
 
<form method="post" > 
 
    <textarea name="code_input" id="code_textarea" class="form-control" rows="5" placeholder="Start coding!" required></textarea> 
 
    <div class="button-container"> 
 
     <select required name="language-select" class="form-control" id="language_selector"> 
 
      <option value="" selected disabled>Language</option> 
 
      <option>20 options follow</option> 
 
<!-- THIS WILL KEEP THE VALUE IN THE DROPDOWN AFTER SUBMIT --> 
 
      <script type="text/javascript"> 
 
       document.getElementById('language_selector').value = ""; 
 
      </script> 
 
     </select> 
 
     <br/> 
 
     <br/> 
 
     <div id="button-container" class="btn-toolbar"> 
 
      <button id="drive_submit_btn" class="btn btn-md" type="submit">Preview</button> 
 
      <button style="display:none" id="upload_btn" class="btn btn-md" type="submit">Upload</button> 
 
     </div> 
 
    </div> 
 
</form> 
 
<div class="show-code"> 
 
    <script src="lib/prism.js"></script> 
 
    <!-- THIS DISPLAYS THE CODE AFTER SUBMITTING USING THE PRISM.JS PLUGIN FOR SYNTAX HIGHLIGHTING --> 
 
    <!-- Get language selection from dropdown and append it to language class. Echo the text as highlighted code --> 
 
    <pre><code class="language-"></code></pre> 
 
</div> 
 
    </div> 
 

 

 
<!-- THIS IS THE JAVASCRIPT TO HIDE THE BUTTON UNTIL TEXT IS ENTERED.--> 
 
<!-- HOWEVER IT ALWAYS HIDES IT!! -->

Answer 2

네이티브.

업로드 버튼이 처음부터 숨겨진, keyUp 이벤트가 텍스트 영역 해고 될 때, 텍스트 영역의 내용을 확인하고 버튼을 수 표시하거나

code_textarea.addEventListener('keyup', function(){ 
 
if(code_textarea.value){ 
 
    upload_btn.classList.remove("hidden"); 
 
} 
 
else { 
 
    upload_btn.classList.add("hidden"); 
 
} 
 
});

.hidden { 
 
    display:none; 
 
}

<textarea name="code_input" id="code_textarea" class="form-control" rows="5" placeholder="Start coding!" required></textarea> 
 

 
<button id="upload_btn" class="btn btn-md hidden" type="submit">Upload</button>