英文:

javascript focus event is not focusing first time its focus at the second time

问题 {#heading}

我面临JavaScript事件焦点和失焦的问题，我试图在输入字段文本上运行一个脚本，该字段具有来自jqeuryUi的日期下拉菜单。我试图应用一个条件，即如果用户选择今天的日期，那么我必须运行该脚本，否则不运行该脚本。

https://camelia.ae/checkout/
这是网站的链接，请尝试将某些内容添加到购物车中。

<script>
    document.addEventListener("DOMContentLoaded", function() {
      var deliveryDateInput = document.getElementById("delivery_date");

      deliveryDateInput.addEventListener("focus", function() {
        // 移除先前的失焦事件监听器，如果有的话
        this.removeEventListener("blur", handleDateBlur);
        
        // 添加失焦事件监听器
        this.addEventListener("blur", handleDateBlur);
      });

      function handleDateBlur() {
        var selectedDateParts = this.value.split("/");
        var selectedDate = new Date(selectedDateParts[2], selectedDateParts[1] - 1, selectedDateParts[0]);
        var today = new Date();
        today.setHours(0, 0, 0, 0);

        if (selectedDate.getTime() === today.getTime()) {
          alert("你好！你选择了今天的日期。");
        }
      }
    });
</script>

我编写了这段代码，我试图在今天的日期上显示警报。我面临的问题是，这段代码工作，但第一次选择时不显示任何内容，但第二次选择时会显示警报。有人可以告诉我解决方法吗？ 英文:

i am facing a problem in javascript event focus and blur i am trying to run a script in a if else condition on a input field text which has a date drop down coming from jqeuryUi i am trying to apply a condition in which if the the user select the today date then i have to run the script otherwise dont run the script
https://camelia.ae/checkout/
here is the link of the website try to add something in the cart

<script>
    document.addEventListener("DOMContentLoaded", function() {
      var deliveryDateInput = document.getElementById("delivery_date");

      deliveryDateInput.addEventListener("focus", function() {
        // Remove the previous blur event listener, if any
        this.removeEventListener("blur", handleDateBlur);
        
        // Attach the blur event listener
        this.addEventListener("blur", handleDateBlur);
      });

      function handleDateBlur() {
        var selectedDateParts = this.value.split("/");
        var selectedDate = new Date(selectedDateParts[2], selectedDateParts[1] - 1, selectedDateParts[0]);
        var today = new Date();
        today.setHours(0, 0, 0, 0);

        if (selectedDate.getTime() === today.getTime()) {
          alert("Hello! You've selected today's date.");
        }
      }
    });



`</script>
`

i have written this code in which i am trying to show the alert on the today date the problem i am facing is that this code is working but on the second time whe i select first time its shows nothing but when i click second time its show alert
can anyone tell me the solution of this

<script>
    document.addEventListener("DOMContentLoaded", function() {
      var deliveryDateInput = document.getElementById("delivery_date");

      deliveryDateInput.addEventListener("focus", function() {
        // Remove the previous blur event listener, if any
        this.removeEventListener("blur", handleDateBlur);
        
        // Attach the blur event listener
        this.addEventListener("blur", handleDateBlur);
      });

      function handleDateBlur() {
        var selectedDateParts = this.value.split("/");
        var selectedDate = new Date(selectedDateParts[2], selectedDateParts[1] - 1, selectedDateParts[0]);
        var today = new Date();
        today.setHours(0, 0, 0, 0);

        if (selectedDate.getTime() === today.getTime()) {
          alert("Hello! You've selected today's date.");
        }
      }
    });



`</script>
`

i have written this code in which i am trying to show the alert on the today date the problem i am facing is that this code is working but on the second time whe i select first time its shows nothing but when i click second time its show alert
can anyone tell me the solution of this

答案1 {#1}

得分: 1

以下是代码的翻译部分：

let date = document.querySelector('#delivery_date');

date.addEventListener('change', onDateChange)

function getFormattedDate() {
    const today = new Date();
    const year = today.getFullYear();
    const month = (today.getMonth() + 1).toString().padStart(2, '0'); // 月份是从零开始计数的
    const day = today.getDate().toString().padStart(2, '0');

    return `${year}-${month}-${day}`;
}
const formattedDate  = getFormattedDate()

function onDateChange(e) {
    let selectedDate = e.target.value;
    if(selectedDate === formattedDate) {
        alert("你好！你选择了今天的日期。");
    }
}

注意：在代码中，我将变量formatedDate改为了formattedDate以修正拼写错误。 英文:

<script>
   let date = document.querySelector('#delivery_date');

date.addEventListener(\'change\', onDateChange)


function getFormattedDate() {
const today = new Date();
const year = today.getFullYear();
const month = (today.getMonth() + 1).toString().padStart(2, \'0\'); // Months are zero-based
const day = today.getDate().toString().padStart(2, \'0\');


        return `${year}-${month}-${day}`;
    }
    const formatedDate  = getFormattedDate()

    function onDateChange(e) {
        let selectedDate = e.target.value;
        if(selectedDate === formatedDate) {
            alert("Hello! You've selected today's date.");
        }



`}
</script>
`