javascript - JS : show textarea field on input change

Question

我有一个表单，当 usr 上传文件时应该显示一个文本区域。

如果用户在图像字段中上传图像，我需要显示文本区域字段。然而，实际上我的代码并没有这样做，即使 javascript 位于 html 内部。

这是为此的 CODEPEN:

https://codepen.io/ogonzales/pen/GPZBjL

我有这个 JS，但无法识别用户何时上传文件，我应该对我的代码进行哪些更改？

<script>
            $(function () {
                $("input:file").change(function () {
                    var fileName = $(this).val();
                    if (fileName != "") {
                        $("#instrucciones-adicionales").show();
                    } else {
                        $("#instrucciones-adicionales").hide();
                    }
                });
            });
        </script>

html:

<div class="row padding80-top">

  <div class="col-md-3 mb-4"></div>
  <div class="col-md-6 mb-4">
     <p class="text-size60 bold-font">Sube tu imagen</p>
     <form method="POST" enctype="multipart/form-data" action="">
        <input type="hidden" name="csrfmiddlewaretoken" value="feLAxC4KQTvAL532BafNKadPOsGOq1OTwLCS6GNReJ3z7lXvIhDRUOE0s0dsnkjU">

          <div class="form-group">


             <div id="div_id_image" class="form-group">

            <label for="id_image" class="col-form-label ">
                Image
            </label>


          <div class="">
              <input type="file" name="image" accept="image/*" class="clearablefileinput" id="id_image">
           </div>
    </div>
    <div id="instrucciones-adicionales"  style="display:none">

    <p class="bold-font"> Instrucciones adicionales (opcional):</p>

    <div id="div_id_comment" class="form-group">

      <label for="id_comment" class="col-form-label ">
                Comment
      </label>

    <div class="">
       <textarea name="comment" cols="40" rows="10" class="textarea form-control" id="id_comment">
</textarea>

    </div> 
  </div>


  </div>
  </div>


   </br>
   </br>

   <p>O, sáltate este paso y envía tu arte por correo electrónico</p>

   <button type="submit" class="btn btn-naranja text-white btn-block">Continuar
   </button>

</form>

更新 1:

问题是对 JQUery 的调用位于底部，位于正文结束标记之前。

我应该在代码中更改什么，以便将对 Jquery 的调用保留在底部，当用户上传图像时它会显示 textarea 字段？

Answer 1

您的笔上没有启用 jQuery。您需要通过点击 JS Pane 顶部的齿轮图标来添加它，然后将其添加到此处。

即使在 Codepen 中，您也可以使用浏览器的开发人员控制台来查看代码生成了哪些错误。在这种情况下，您会看到:

Uncaught ReferenceError: $ is not defined

这告诉你 jQuery 没有被加载。