So, I have got an input field, a hidden one, text type, of which I need to change the value. So I'm already changing the value of that input field using js and then I need to change it again if it gets changed. Basically, I'm first changing the default value that gets loaded and after that initial change, if it gets changed by something else (it does, by a click event I believe) I want to change it again.

I thought I would use the 'change' event but apparently, if the value is being changed by js, that event doesn't fire up. I found out, as an alternative, you can just construct your own event and attach it to the input element for your changes but I can't seem to figure out a way to achieve this. Here's the current code I have that is for changing the initial value:

    let timeout = setTimeout(changeText, 1000);
    function changeText() {
        let month = document.getElementById("date-picker");
        let domMonth = month.value.split(" ");
        let translatedMonths = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
        let actualMonths = ["January", "February", "Mars", "April", "May", "June", "July", "August", "September", "October", "Noember", "December"];
                    
        domMonth[0] = translatedMonths[actualMonths.indexOf(domMonth[0])];
        month.value = domMonth.join(" ");
    }

FYI: #date-picker going to have a date with month name at the start and date at the end, so like 'January 20'. Basically, I'm translating the month's name here. I believe there are some bugs in this correct implementation, but I want to make it fully work right now, then we can talk about the bugs. So basically change text function should fire up if there's a change in month.value, any help is appreciated.

Edit: So the #date-picker is kind of misleading, it is not actually the picker, it rather opens the actual picker. It looks like this:

<input type="text" id="date-picker" readonly="readonly" class="redacted-class-names" autocomplete="off" placeholder="Date" value="">

I still have confusion on how it is showing that text (that value I'm editing, it is just under one div element and there is no other element inside it)

When you click on it, it opens the picker, which is this: https://codepen.io/M4HD1BD/pen/rNGvWyq

Hope this helps