Native Javascript - Has attribute else if statement doesn't work

Question

I've setup my variables and name it like this :

const x = document.querySelector(".ui-datepicker-trigger");
const y = document.querySelector("#ctl00_c_TransPwdFunc_img100");

Once i setup the variables I was creating the if statement and the code is below:

if (x.hasAttribute("src", "/mvptest_int/App_themes/btnCalendar.png") == x){
            x.setAttribute("src","/mvptest_int/App_themes/btnCalendarWhite.png");
            console.log(x);
        } else if (y.hasAttribute("src", "../App_Themes/btnGetSMS.png" == y)){
            y.setAttribute("src","../App_Themes/btnGetSMSWhite.png");
        }

I have tested this out inside the console log individually and they are both working. But the issues that i'm facing is that:

x attribute is only showing up in the beginning and once a users click next it will disappear and this is the issue what i'm facing:

Error message Code error message

So i can see my x changes is working correctly but none of my java script are working because of this error message.

Could someone please help me with this issue and also let me know if there a better solution to do this.

Thanks

FE Look: First page Second page

Answer 1

If you check the documentation, you can see that the element.hasAttribute return true or false and require only one attribute, not as you did. That why you have the error.

And supposed that you use the x.hasAttribute("src") == x, it will never return true.

Last point, make sure that your x element exists.