Расширение Chrome: рассчитайте в миллисекундах и нажмите кнопку через определенные секунды

Ну, я практикуюсь в расширении Chrome, я новичок в этом.

Вот мой код.

popup.html

<!doctype html>
<html>
    <head>
        <title>Laser Script</title>
        <script type = "text/javascript" src = "popup.js"></script>
        <style type = "text/css">
            h1 { font-size: 22px; }
            .powered {
                font-size: 14px;
                margin-top: 8px;
            }
        </style>
    </head>
    <body>
        <h1>Scheduled Click</h1>
        <div id = "contentWrapper">
            <input type = "text" id = "duration" placeholder = "Duration">
            <input type = "text" id = "attack_date"  placeholder = "Day/Month/Year">
            <input type = "text" id = "attack_time" placeholder = "00:00:00">
            <button id = "schedule">Start Attack</button>
        </div>
        <div class = "powered">Courtesy of <img src = "justpark_logo.png" width = "170px"></div>
    </body>
</html>

popup.js

function initialise () {
    // here im calculating the remind time in (mileseconds) that the button have to be pressed 
    var attack_timeInput = document.getElementById("attack_time");
    var attack_timeParts = attack_timeInput.value.split(":");
    var hours = parseInt(attack_timeParts[0],10);
    var minutes = parseInt(attack_timeParts[1],10);
    var seconds = parseInt(attack_timeParts[2],10);
    var mileseconds = parseInt(attack_timeParts[3],10);     
    var attack_DateInput = document.getElementById("attack_date");
    var attack_DateInputParts = attack_DateInput.value.split("/");
    var day = parseInt(attack_DateInputParts[0],10);
    var month = parseInt(attack_DateInputParts[1],10);
    var year = parseInt(attack_DateInputParts[2],10);   
    var durationInput = document.getElementById("duration");
    var durationParts = durationInput.value.split(":");
    var hours2 = parseInt(durationParts[0],10)*3600000;
    var minutes2 = parseInt(durationParts[1],10)*60000;
    var seconds2 = parseInt(durationParts[2],10)*1000;
    var duration_mile = hours2+minutes2+seconds2;       
    var now = new Date();
    var new_now = now.getTime();
    var full_attack_date = new Date(year, month-1, day, hours, minutes, seconds, mileseconds); 
    var new_full_attack_date = full_attack_date.getTime();  
    var delayInputValue = new_full_attack_date - new_now - duration_mile;

    function scheduleClick () {
        document.getElementById("contentWrapper").innerHTML = 'The attack will start in ' + delayInputValue + 'miliseconds';
        var codeString = 'var button = document.getElementById("troop_confirm_go"); setTimeout( function() { button.click(); },'  + delayInputValue + ' )';
        console.info(codeString);
        chrome.tabs.executeScript({ code: 'console.info(document.getElementById("The attack will start ' + delayInputValue + ' miliseconds"))' });
        chrome.tabs.executeScript({ code: codeString});
    };

    scheduleButton = document.getElementById("schedule");
    scheduleButton.addEventListener('click', scheduleClick, true);
};
document.addEventListener('DOMContentLoaded', initialise, false);

Итак, у меня есть 3 входа. Я рассчитываю время напоминания до нажатия кнопки. (оно работает)

Но в этой части

document.getElementById("contentWrapper").innerHTML = 'The attack will start in ' + delayInputValue + 'miliseconds';

это дипломы

The attack will start in NaN miliseconds.

и кнопка нажимается мгновенно.

Я также исправил этот код:

var  p = 1 ; //it's outside the function as the var delayInputValue
document.getElementById("contentWrapper").innerHTML = 'The attack will start in ' + delayInputValue + 'seconds';

и он отображает:

The attack will start in 1 miliseconds.

Итак, вот мой вопрос, почему он не может читать и работать с var delayInputValue, но я могу с var p? Можно как-нибудь исправить?

javascript html google-chrome-extension settimeout

30.03.2021 01:12

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

Понятно - функция initialise() вызывается, когда ваш DOM-контент загружается. В этот момент пользователь не ввел информацию в текстовые поля, поэтому они отображаются как пустые или неопределенные. Когда код начинает работать с этими данными, он производит данные как NaN, поскольку вычисления не работают. Чтобы код работал правильно, вам нужно поместить код, работающий с данными из этих полей, внутри функции scheduleClick(), например:

function initialise () {

    function scheduleClick () {
        var attack_timeInput = document.getElementById("attack_time");
        var attack_timeParts = attack_timeInput.value.split(":");
        var hours = parseInt(attack_timeParts[0],10);
        var minutes = parseInt(attack_timeParts[1],10);
        var seconds = parseInt(attack_timeParts[2],10);
        //var mileseconds = parseInt(attack_timeParts[3],10);     
        var attack_DateInput = document.getElementById("attack_date");
        var attack_DateInputParts = attack_DateInput.value.split("/");
        var day = parseInt(attack_DateInputParts[0],10);
        var month = parseInt(attack_DateInputParts[1],10);
        var year = parseInt(attack_DateInputParts[2],10);   
        var durationInput = document.getElementById("duration");
        var durationParts = durationInput.value.split(":");
        var hours2 = parseInt(durationParts[0],10)*3600000;
        var minutes2 = parseInt(durationParts[1],10)*60000;
        var seconds2 = parseInt(durationParts[2],10)*1000;
        var duration_mile = hours2+minutes2+seconds2;       
        var now = new Date();
        var new_now = now.getTime();
        var full_attack_date = new Date(year, month-1, day, hours, minutes, seconds); 
        var new_full_attack_date = full_attack_date.getTime();  
        var delayInputValue = new_full_attack_date - new_now - duration_mile;
        

        document.getElementsByTagName("div")[0].innerHTML = 'The attack will start in ' + delayInputValue + 'miliseconds';
    };

    scheduleButton = document.getElementById("schedule");
    scheduleButton.addEventListener('click', scheduleClick, true);
};
document.addEventListener('DOMContentLoaded', initialise, false);

Обратите внимание, что я также удалил переменную miliseconds, так как входные данные, которые я использовал, включали только часы, минуты и секунды. Вы также должны добавить код для очистки входных данных, чтобы убедиться, что они находятся в нужном вам формате, прежде чем вызывать функцию.

надеюсь, это поможет

Вы правы, я перед загрузкой сюда поменял, а поменять забыл, плохо

— 30.03.2021 01:52

Что вы вводите в качестве входных данных?

— 30.03.2021 02:05

я приведу вам примеры. По продолжительности -> 1:00:00, Дата_атаки-> 30/3/2021, Время_ атаки-> 23: 10: 01: 300 (300 - миллисекунды).

— 30.03.2021 02:08

И он обнаруживает миллисекунды напоминания до начала атаки, поэтому он прибудет во время атаки.

— 30.03.2021 02:09

Обновил мой ответ, немного поигравшись с вашим кодом. Сейчас работает для меня, так что я надеюсь, что мое объяснение имело смысл

— 30.03.2021 23:48

30.03.2021 01:44