JS:在输入更改时显示文本区域字段

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的调用保留在底部，当用户上传图像时，它会显示文本区域字段？

Answer 1

您的笔上没有启用jQuery。您需要通过点击JS窗格顶部的cog图标来添加它，并将其添加到那里。

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

Uncaught ReferenceError: $ is not defined

这告诉您jQuery没有被加载。