Entered Value in text boxes with Java script but it's considering as blank

Hi,

We are trying to automate a user login page where we put username and password and then click on sign in button. 

Issue: When i click on sign in button after entering the username and password with java script code, It's showing the error like the User Name and Password are blank fields.

Refer Attached Screenshots

The Code that we are using is:

//This function enters the login
function enterUserName() {

var inputs = document.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type.toLowerCase() == 'text') {
inputs[i].click();
inputs[i].value = 'dsharma@cadent.tv';
inputs[i].dispatchEvent(new Event('change'));
}

}
}

//This function enters the login
function enterPassword() {

var inputs = document.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type.toLowerCase() == 'password') {
inputs[i].click();
inputs[i].value = '12345';
inputs[i].dispatchEvent(new Event('change'));
}

}

}

function clickSignInButton()
{
var inputs = document.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type.toLowerCase() == 'submit') {
inputs[i].click();
}
}
}

setTimeout(enterUserName, 1000);
setTimeout(enterPassword, 2000);
setTimeout(clickSignInButton, 3000);