CODEWITHSUNDEEP
javascript
Dinesh s
Dinesh s

Reputation: 377

Radio checked and addeventlistener is not working

I am using one js file for two html page
Here is my html code

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

The today radio button is checked by default
i want to add onchange event listner to first input date id = startdate if the today radio button is checked

Here is the code i tried in db.js

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

I also tried inside the script tag in html but the code does not work

and another doubt is
if i add the eventlistener to date in script tag in html like this

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

  </script>

The code is working fine and logging as hi
but when I add the same code in db.js file the code does not work

Any one help to solve

Upvotes: 2

Views: 393

Answers (1)

Alireza Ahmadi
Alireza Ahmadi

Reputation: 9893

In your db.js file you forgot ' in console.log('hi);. You have to change it with console.log('hi');

I ran your code as an inline script and it works!

   
    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>

Upvotes: 2

Related Questions