Ionic 5: How to add event listener to ion-input using Javascript

Issue

I am trying to add a event listener to a ion-input so then when there is a change and onkeyup the respective functions execute with the id passed in

Code

<ion-input id="totalTimeOpening" type="text"></ion-input>

<script>
    function testChange(id) {
        console.log(id + " Change");
    }

    function testOnKeyUp(id) {
        console.log(id + " KEYUP");
    }

    document.getElementById("totalTimeOpening").addEventListener('ionChange', testChange.bind('totalTimeOpening'), false);


    document.getElementById("totalTimeOpening").addEventListener('onkeyup', testOnKeyUp.bind('totalTimeOpening'), false);
</script>

The current code seems to pass the whole ion-input object in

Solution

I figured this out.

    function testChange(id) {
        console.log(id + " Change");
    }

    function testOnKeyUp(id) {
        console.log(id + " KEYUP");
    }


        document.getElementById("totalTimeOpening").addEventListener('ionBlur', function(){
            testChange('totalTimeOpening')
        });


        document.getElementById("totalTimeOpening").addEventListener('ionInput', function(){
            testOnKeyUp('totalTimeOpening')
        });

the functions had to go inside function(){here}) and it works. Also the onkeyup won't work with ionic it seems and instead ionInput seems to work as a substitue

Answered By - pilotman