如果文本区域为空则隐藏按钮的 JavaScript 函数不起作用

Question

我在 div 内有一个文本区域，下面有一个选择下拉列表，下面有两个按钮。一种是预览，另一种是将文本上传到文件。如果文本区域为空，我试图隐藏上传按钮。我的 JavaScript 无法正常工作，因为它总是隐藏按钮。

这是表单、按钮容器和选择下拉列表(由于有 20 个选项，因此省略了所有选项):

<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>

我见过很多链接到他们的 JSFiddle 的答案，而且它们都工作得很好。是什么导致我的无法正常工作？除了我的 JS 函数之外，其他一切都工作正常。

Answer 1

原生 JavaScript 解决方案。

上传按钮从一开始就隐藏，当为文本区域触发 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>