javascript - 收音机检查和 addeventlistener 不工作

问题描述

我正在为两个 html 页面使用一个 js 文件
这是我的 html 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- <link rel="stylesheet" href="../assets/css/style.css"> -->
    <!-- bootstrap -->
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">

  
    
</head>
<body>

   <div id="salestable">
        <label for="Type">Today</label>
        <input type="radio" id="day" name="months" value="Today" checked>
        <label for="Type">Peroid</label>
        <input type="radio" id="range-period" name="months" value="Peroid" onchange="getperiod()">
        
         <input type="date" name="Date" id="startdate" >
        <input type="date" name="Date" id="end-date"  >
    </div>


  <script src="../db.js"></script>

</body>
</html>

today默认情况下选中单选按钮，如果选中今天单选按钮，
我想将 onchange 事件侦听器添加到第一个输入日期id = startdate

这是我尝试过的代码db.js

if(document.getElementById('day').checked){
    // get date element 
   const day = document.getElementById('startdate');
   day.addEventListener("change", function() {
    console.log('hi); 
   });
}

我也尝试在 html 中的脚本标签内，但代码不起作用

，另一个疑问是我是否像这样在 html
中的标签中添加 eventlistener 到 datescript

  <script>
  
   
    const day = document.getElementById('startdate');
    day.addEventListener("change", function() {
    console.log('hi'); 
    });
  

  </script>

代码工作正常并且记录为 hi
但是当我在db.js文件中添加相同的代码时代码不起作用

任何一个帮助解决

标签： javascript

在您的db.js文件中，您忘记'了console.log('hi);. 你必须改变它console.log('hi');

我将您的代码作为内联脚本运行，它可以工作！

   
    const day = document.getElementById('startdate');
    day.addEventListener("change", function() {
    console.log('hi'); 
    });

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- <link rel="stylesheet" href="../assets/css/style.css"> -->
    <!-- bootstrap -->
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">

  
    
</head>
<body>

   <div id="salestable">
        <label for="Type">Today</label>
        <input type="radio" id="day" name="months" value="Today" checked>
        <label for="Type">Peroid</label>
        <input type="radio" id="range-period" name="months" value="Peroid" onchange="getperiod()">
        
         <input type="date" name="Date" id="startdate" >
        <input type="date" name="Date" id="end-date"  >
    </div>



</body>
</html>

javascript - 收音机检查和 addeventlistener 不工作

问题描述

解决方案

推荐阅读