Радио проверено, и addeventlistener не работает

ProgramBox

Радио проверено, и addeventlistener не работает

Post author:admin
Запись опубликована:15 января, 2022
Post category:Вопросы по программированию

#javascript

Вопрос:

Я использую один файл js для двух html-страниц
, вот мой 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, но код не работает

и еще одно сомнение заключается
в том, добавлю ли я список событий на дату в script теге в html, как это

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

  </script>

Код работает нормально и регистрируется как привет
но когда я добавляю тот же код в db.js файл, код не работает

Кто-нибудь поможет решить

1. В db.js файл вы добавили код с тегом <script> или без него?

2. без тега скрипта

3. Если радио «Сегодня» установлено по умолчанию, какой смысл добавлять прослушиватель событий только в том случае, если он установлен? Возможно, вместо этого вам следует переместить проверку внутрь прослушивателя событий. Кроме того, вы проверяли наличие каких-либо сообщений об ошибках в консоли?

4. спасибо вам за это добавлено условие if внутри функции onchange

Ответ №1:

В вашем 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>

1. я выше упоминал, что eventlistener хорошо работает во встроенном режиме, но я хочу работать с переключателем, проверенным условием во встроенном или db.js файл

2. Хорошо, я проверил document.getElementById('day').checked в своем встроенном коде сценария

3. В моем компьютере я также попытался с db.js и все равно все было хорошо. проверьте, чтобы увидеть свой db.js загружены правильно?

4. я добавил db.js только тег закрытия тела выше, и в этом html-файле база данных загружена правильно, но я не понял, почему прослушиватель событий не работает, я думаю, что уже есть четыре прослушивателя для другой html-страницы в db.js таким образом, не работает только прослушиватель событий

Ответ №2:

Много раз сценарии завершаются неудачно, когда они используются в элементе, потому что сценарий запускается до того, как элемент фактически появился на странице.

Именно по этой причине вы чаще всего ставите свои сценарии перед тегом конечного тела. Если у вас есть библиотеки JS, они часто заканчиваются в области головы, так как они не зависят ни от каких элементов, но другие сценарии могут зависеть от них.

В jQuery есть $(документ).готово(() => { …код }) API, доступный для запуска кода только после завершения загрузки документа.

Я полагаю, что с вашим внешним скриптом есть некоторые проблемы с именами. Скорее всего, это «../» часть src вашего скрипта, которая вызывает проблему. Если вы попытаетесь положить «db.js» в том же каталоге, не исключено, что он будет работать. Я видел нечто подобное раньше, но я не уверен, почему это так.

Но это также может быть связано с тем, что документ не готов. Вы можете добавить свой собственный загрузчик, чтобы проверить, готов ли документ. Мне нравится эта реализация:

 (ready = () => {
  // all html assets loaded
  if (document.readyState == 'complete') {
    // add your code here, add eventlisteners etc
  } else {
    setTimeout(() => { ready() }, 100) // retry in 100ms if doc not ready
  }
})()