Jquery 从生日日期计算年龄并显示输入

我正在尝试使用laravel8将表单存储到数据库中

因此，我有以下表格：

 <form id="castingform" method="post" action="castingss"   enctype="multipart/form-data">
       
                        {{ csrf_field() }}
                        <input type="hidden" id="id_hidden" name="id" />
                        <div class="form-row">
                           <div class="form-group col-md-6">
                              <label for="casting_name">Nom</label>
                              <input type="text" class="form-control" id="casting_name" name="casting_name" placeholder="Nom" >
                             
                           </div> 
                           <div class="form-group col-md-6">
                              <label for="casting_name">Prénom</label>
                              <input type="text" class="form-control" id="casting_prenom" name="casting_prenom" placeholder="Prenom" >
                         
                           </div>
                           </div>
                         <div class="form-row">
                           <div class="form-group col-md-6">
                              <label for="casting_cin">CIN</label>
                              <input type="text" class="form-control" id="casting_cin" name="casting_cin" placeholder="Cin">
                           </div>
                         </div>
                         <div class="form-row">
                           <div class="form-group col-md-6">
                              <label for="casting_date_naissance">Date de naissance</label>
                             <div class="input-group date">

                                            <input type="text" class="form-control" id="casting_date_naissance" name="casting_date_naissance">
                                            <span class="input-group-text input-group-append input-group-addon">
                                                <i class="simple-icon-calendar"></i>
                                            </span>
                                        </div>
                                 </div>
                           <div class="form-group col-md-6">
                              <label for="casting_lieu_naissance">Lieu de naissance</label>
                              <input type="text" class="form-control" id="casting_lieu_naissance" name="casting_lieu_naissance" placeholder="Lieu de naissance">
                           </div>
                         </div>  
                          <div class="form-group col-md-6 js-guarantor-container" hidden>
                        <label for="guarantor">Nom et prénom du représentatnt légal </label>
                        <input type="text" class="form-control" id="guarantor" name="guarantor" placeholder="Représentant">
                    </div>
                    <div class="form-group col-md-6 js-guarantor_identification_number-container" hidden>
                        <label for="guarantor_identification_number">CIN du représentatnt légal</label>
                        <input type="number" class="form-control" id="guarantor_identification_number" name="guarantor_identification_number" placeholder="CINE">
                        
                    </div> 
                   <div class="form-group col-md-6 js-guarantor_lien-container" hidden>
                    <label for="guarantor_identification_number">Lien</label>
                    <input type="text" class="form-control" id="casting_lien" name="casting_lien" placeholder="Lien">
                    
                </div>       
                       
                    
                        <div class="form-group" align="center">
                          <input type="hidden" name="action" id="action" />
                          <input type="hidden" name="hidden_id" id="hidden_id" />
                          <input type="submit" name="action_button" id="action_button" class="btn btn-warning" value="ADD" />
                        </div>
                        <div class=" col-md-6">
                          <span id="form_result"></span>
                        </div>
                     </form>

{{csrf_field（）}}
笔名
名词
CIN
出生日期
新生之家酒店
代表法律的名称
这是我的最爱
留置权

我想在何时输入生日直接计算年龄，如果年龄小于18岁，则显示隐藏的输入

因此，我尝试以下代码，但不起作用：

var dateinput = document.getElementById('casting_date_naissance');
  var guarantorContainer = document.querySelector('.js-guarantor-container');
var guarantorIdentificationNumberContainer = document.querySelector('.js-guarantor_identification_number-container');
var guarantorLienContainer = document.querySelector('.js-guarantor_lien-container');
      var dob = new Date(dateinput);
  dob.addEventListener('change', function(evt) {
    var a = moment($(this).val(), "MM/DD/YYYY").month(0).from(moment().month(0))
   if (+a < 18) {
      guarantorContainer.removeAttribute('hidden');
      guarantorIdentificationNumberContainer.removeAttribute('hidden');
      guarantorLienContainer.removeAttribute('hidden');
    } else {
      guarantorContainer.setAttribute('hidden', true);
      guarantorIdentificationNumberContainer.setAttribute('hidden', true);
        guarantorLienContainer.setAttribute('hidden',true);
    }
  });

var dateinput=document.getElementById（'casting_date_naissance'）；
var guarantorContainer=document.querySelector（“.js担保人容器”）；
var guarantorIdentificationNumberContainer=document.querySelector（'.js-saguarantori_-identification_-number-container'）；
var guarantorLienContainer=document.querySelector（“.js-saguarantorlien-container”）；
var dob=新日期（日期输入）；
dob.addEventListener（'change'，函数（evt）{
变量a=时刻（$（this）.val（），“MM/DD/YYYY”）.month（0）.from（时刻（）.month（0））
如果（+a<18）{
担保人。删除属性（“隐藏”）；
GuarantoridIdentificationNumberContainer.removeAttribute（“隐藏”）；
担保人。删除属性（“隐藏”）；
}否则{
guarantorContainer.setAttribute（'hidden'，true）；
GuarantoridIdentificationNumberContainer.setAttribute（'hidden'，true）；
setAttribute（'hidden'，true）；
}
});

编辑

我得到这个错误：

Uncaught TypeError: dob.addEventListener is not a function
    at HTMLDocument.<anonymous> (castingss:1078)
    at fire (jquery.js:1037)
    at Object.fireWith [as resolveWith] (jquery.js:1148)
    at Function.ready (jquery.js:433)
    at HTMLDocument.completed (jquery.js:103)

未捕获类型错误：dob.addEventListener不是函数
在HTMLDocument。（铸件编号：1078）
失火（jquery.js:1037）
在Object.fireWith[as resolveWith]（jquery.js:1148）
在Function.ready（jquery.js:433）
在HTMLDocument.completed上（jquery.js:103）

如果你有什么想法帮我

提前谢谢你

我解决了两件事：

new Date（）

构造函数需要一个日期字符串，而不是

HTML元素

addEventListener（）

必须应用于

HTML元素，而不是

new Date（）的实例

我不知道您是否在使用jQuery，但由于您使用vanilla JS来选择顶部的所有元素，因此我将

$（this.val（）

更改为

evt.target.value

。如果您使用的是jQuery，请忽略这个

您的

moment（$（this）.val（），“MM/DD/yyyyy”）.month（0）。from（moment（）.month（0））

返回一个字符串（'x年前'），无法解析为数字，因此返回

NaN

var dateinput=document.getElementById（'casting_date_naissance'）；
var guarantorContainer=document.querySelector（“.js担保人容器”）；
var guarantorIdentificationNumberContainer=document.querySelector（'.js-saguarantori_-identification_-number-container'）；
var guarantorLienContainer=document.querySelector（“.js-saguarantorlien-container”）；
var dob=新日期（dateinput.value）；
dateinput.addEventListener（'change'，函数（evt）{
变量a=矩（）.diff（矩（evt.target.value，“MM/DD/YYYY”），“年”）；
如果（a<18）{
担保人。删除属性（“隐藏”）；
GuarantoridIdentificationNumberContainer.removeAttribute（“隐藏”）；
担保人。删除属性（“隐藏”）；
}否则{
guarantorContainer.setAttribute（'hidden'，true）；
GuarantoridIdentificationNumberContainer.setAttribute（'hidden'，true）；
setAttribute（'hidden'，true）；
}
});

以下是我对需要完成的工作的尝试：

const担保人=document.queryselectoral（“div[class*=担保人]”；
document.getElementById（“铸造日期”）addEventListener（“输入”，ev=>{
让成人=新日期（ev.目标值）；
成人=新日期（）>成人.setFullYear（成人.getFullYear（）+18）；
担保人.forEach（g=>g.classList.toggle（“隐藏”，成人））；
})

.hidden{display:none}

{{csrf_field（）}}
笔名
名词
CIN
出生日期
奈桑之家酒店