How do I change this <img> tag's source with an “if else if” statement?

Question

I am creating a password rater that rates the user's password on a scale of 1-10 (or from dark red to green, with 10 jpeg images) by switching out jpeg images according to the user's password score. I have got the computer to print out "passwordPoints" so I know this variable is fine. I am currently having a great deal of trouble getting the second "if else, else if" statement to work and change the imageSwapper source. I have checked several guides on stackoverflow for this issue and have found that I am actually doing everything right... Or so it seems. Any suggestions as to why this isn't working?

var password = document.getElementById("your_Password").value;
var passwordArray = password.split("");
var imageSwapper = document.getElementById("image_Swapper");
var passwordPoints = 0;


if(passwordArray.length === 0){
    document.getElementById("appendomatic").innerHTML = "You need to enter something.";
    return false;
}


if(passwordArray.indexOf(" ") > -1){
    document.getElementById("appendomatic").innerHTML = "No spaces allowed - please use underscores.";
    return false;
}


if(!containsNumbers(passwordArray) && !containsCaps(passwordArray) && !containsSymbols(passwordArray)){
    passwordPoints = Math.pow(26, passwordArray.length);
}else if(containsNumbers(passwordArray) && !containsCaps(passwordArray) && !containsSymbols(passwordArray)){
    passwordPoints = Math.pow(36, passwordArray.length);
}else if(!containsNumbers(passwordArray) && containsCaps(passwordArray) && !containsSymbols(passwordArray)){
    passwordPoints = Math.pow(52, passwordArray.length);
}else if(!containsNumbers(passwordArray) && !containsCaps(passwordArray) && containsSymbols(passwordArray)){
    passwordPoints = Math.pow(56, passwordArray.length);
}else if(containsNumbers(passwordArray) && containsCaps(passwordArray) && !containsSymbols(passwordArray)){
    passwordPoints = Math.pow(62, passwordArray.length);
}else if(containsNumbers(passwordArray) && !containsCaps(passwordArray) && containsSymbols(passwordArray)){
    passwordPoints = Math.pow(66, passwordArray.length);
}else if(!containsNumbers(passwordArray) && containsCaps(passwordArray) && containsSymbols(passwordArray)){
    passwordPoints = Math.pow(82, passwordArray.length);
}else if(containsNumbers(passwordArray) && containsCaps(passwordArray) && containsSymbols(passwordArray)){
    passwordPoints = Math.pow(92, passwordArray.length);
}


if(passwordPoints < 100){
    imageSwapper.src = "images/light1.jpg";
}else if(passwordPoints > Math.pow(10, 8) && passwordPoints < Math.pow(10, 11)){
    imageSwapper.src = "images/light2.jpg";
}else if(passwordPoints > Math.pow(10, 11) && passwordPoints < Math.pow(10, 14)){
    imageSwapper.src = "images/light3.jpg";
}else if(passwordPoints > Math.pow(10, 14) && passwordPoints < Math.pow(10, 17)){
    imageSwapper.src = "images/light4.jpg";
}else if(passwordPoints > Math.pow(10, 17) && passwordPoints < Math.pow(10, 20)){
    imageSwapper.src = "images/light5.jpg";
}else if(passwordPoints > Math.pow(10, 20) && passwordPoints < Math.pow(10, 23)){
    imageSwapper.src = "images/light6.jpg";
}else if(passwordPoints > Math.pow(10, 23) && passwordPoints < Math.pow(10, 26)){
    imageSwapper.src = "images/light7.jpg";
}else if(passwordPoints > Math.pow(10, 26) && passwordPoints < Math.pow(10, 29)){
    imageSwapper.src = "images/light8.jpg";
}else if(passwordPoints > Math.pow(10, 29) && passwordPoints < Math.pow(10, 32)){
    imageSwapper.src = "images/light9.jpg";
}else if(passwordPoints > Math.pow(10, 32)){
    imageSwapper.src = "images/light10.jpg";
}

Answer 1

Your HTML is not valid, like you didn't provide = for id in img tag

<img id "image_Swapper"

And many others.

Here is a working snippet

 function passwordRater() { var password = document.getElementById("your_Password").value; var passwordArray = password.split(""); var imageSwapper = document.getElementById("image_Swapper"); var passwordPoints = 0; if(passwordArray.length === 0){ document.getElementById("appendomatic").innerHTML = "You need to enter something."; return false; } if(passwordArray.indexOf(" ") > -1){ document.getElementById("appendomatic").innerHTML = "No spaces allowed - please use underscores."; return false; } if(!containsNumbers(passwordArray) && !containsCaps(passwordArray) && !containsSymbols(passwordArray)){ passwordPoints = Math.pow(26, passwordArray.length); }else if(containsNumbers(passwordArray) && !containsCaps(passwordArray) && !containsSymbols(passwordArray)){ passwordPoints = Math.pow(36, passwordArray.length); }else if(!containsNumbers(passwordArray) && containsCaps(passwordArray) && !containsSymbols(passwordArray)){ passwordPoints = Math.pow(52, passwordArray.length); }else if(!containsNumbers(passwordArray) && !containsCaps(passwordArray) && containsSymbols(passwordArray)){ passwordPoints = Math.pow(56, passwordArray.length); }else if(containsNumbers(passwordArray) && containsCaps(passwordArray) && !containsSymbols(passwordArray)){ passwordPoints = Math.pow(62, passwordArray.length); }else if(containsNumbers(passwordArray) && !containsCaps(passwordArray) && containsSymbols(passwordArray)){ passwordPoints = Math.pow(66, passwordArray.length); }else if(!containsNumbers(passwordArray) && containsCaps(passwordArray) && containsSymbols(passwordArray)){ passwordPoints = Math.pow(82, passwordArray.length); }else if(containsNumbers(passwordArray) && containsCaps(passwordArray) && containsSymbols(passwordArray)){ passwordPoints = Math.pow(92, passwordArray.length); } if(passwordPoints < 100){ imageSwapper.src = "http://dummyimage.com/100/000000/fff&text=r1"; }else if(passwordPoints > Math.pow(10, 8) && passwordPoints < Math.pow(10, 11)){ imageSwapper.src = "http://dummyimage.com/100/ff0000/fff&text=r2"; }else if(passwordPoints > Math.pow(10, 11) && passwordPoints < Math.pow(10, 14)){ imageSwapper.src = "http://dummyimage.com/100/ff0000/fff&text=r3"; }else if(passwordPoints > Math.pow(10, 14) && passwordPoints < Math.pow(10, 17)){ imageSwapper.src = "http://dummyimage.com/100/ff0000/fff&text=r4"; }else if(passwordPoints > Math.pow(10, 17) && passwordPoints < Math.pow(10, 20)){ imageSwapper.src = "http://dummyimage.com/100/ff0000/fff&text=r5"; }else if(passwordPoints > Math.pow(10, 20) && passwordPoints < Math.pow(10, 23)){ imageSwapper.src = "http://dummyimage.com/100/00ff00/fff&text=r6"; }else if(passwordPoints > Math.pow(10, 23) && passwordPoints < Math.pow(10, 26)){ imageSwapper.src = "http://dummyimage.com/100/00ff00/fff&text=r7"; }else if(passwordPoints > Math.pow(10, 26) && passwordPoints < Math.pow(10, 29)){ imageSwapper.src = "http://dummyimage.com/100/00ff00/fff&text=r8"; }else if(passwordPoints > Math.pow(10, 29) && passwordPoints < Math.pow(10, 32)){ imageSwapper.src = "http://dummyimage.com/100/00ff00/fff&text=r9"; }else if(passwordPoints > Math.pow(10, 32)){ imageSwapper.src = "http://dummyimage.com/100/00ff00/fff&text=r10"; } } function containsNumbers(passwordArray) { if(passwordArray.indexOf("0") > -1 || passwordArray.indexOf("1") > -1 || passwordArray.indexOf("2") > -1 || passwordArray.indexOf("3") > -1 || passwordArray.indexOf("4") > -1 || passwordArray.indexOf("5") > -1 || passwordArray.indexOf("6") > -1 || passwordArray.indexOf("7") > -1 || passwordArray.indexOf("8") > -1 || passwordArray.indexOf("9") > -1) { return true; } else { return false; } } function containsCaps(passwordArray) { if(passwordArray.indexOf("A") > -1 || passwordArray.indexOf("B") > -1 || passwordArray.indexOf("C") > -1 || passwordArray.indexOf("D") > -1 || passwordArray.indexOf("E") > -1 || passwordArray.indexOf("F") > -1 || passwordArray.indexOf("G") > -1 || passwordArray.indexOf("H") > -1 || passwordArray.indexOf("I") > -1 || passwordArray.indexOf("J") > -1 || passwordArray.indexOf("K") > -1 || passwordArray.indexOf("L") > -1 || passwordArray.indexOf("M") > -1 || passwordArray.indexOf("N") > -1 || passwordArray.indexOf("O") > -1 || passwordArray.indexOf("P") > -1 || passwordArray.indexOf("Q") > -1 || passwordArray.indexOf("R") > -1 || passwordArray.indexOf("S") > -1 || passwordArray.indexOf("T") > -1 || passwordArray.indexOf("U") > -1 || passwordArray.indexOf("V") > -1 || passwordArray.indexOf("W") > -1 || passwordArray.indexOf("X") > -1 || passwordArray.indexOf("Y") > -1 || passwordArray.indexOf("Z") > -1) { return true; } else { return false; } } function containsSymbols(passwordArray) { if(passwordArray.indexOf("`") > -1 || passwordArray.indexOf("~") > -1 || passwordArray.indexOf("!") > -1 || passwordArray.indexOf("@") > -1 || passwordArray.indexOf("#") > -1 || passwordArray.indexOf("$") > -1 || passwordArray.indexOf("%") > -1 || passwordArray.indexOf("^") > -1 || passwordArray.indexOf("&") > -1 || passwordArray.indexOf("*") > -1 || passwordArray.indexOf("(") > -1 || passwordArray.indexOf(")") > -1 || passwordArray.indexOf("-") > -1 || passwordArray.indexOf("_") > -1 || passwordArray.indexOf("=") > -1 || passwordArray.indexOf("+") > -1 || passwordArray.indexOf("[") > -1 || passwordArray.indexOf("]") > -1 || passwordArray.indexOf("\\\\") > -1 || passwordArray.indexOf(":") > -1 || passwordArray.indexOf(";") > -1 || passwordArray.indexOf("'") > -1 || passwordArray.indexOf('"') > -1 || passwordArray.indexOf("'") > -1 || passwordArray.indexOf("<") > -1 || passwordArray.indexOf(">") > -1 || passwordArray.indexOf(",") > -1 || passwordArray.indexOf(".") > -1 || passwordArray.indexOf("?") > -1 || passwordArray.indexOf("/") > -1) { return true; } else { return false; } } 

 <p id = "appendomatic"></p> <h1> Password Strength Checker </h1> <p id = "info">Enter a password below to check its strength!<p> <input id = "your_Password" name = "yourPassword" type = "password" maxlength = "20"><button id = "submit_Button" name = "submitButton" onclick = "passwordRater()">Submit</button> <p id = "feed"></p> <img id="image_Swapper" src = "http://dummyimage.com/100/000/fff&text=r0" /> 

Answer 2

A couple of issues:

• Your HTML is not valid. You probably noticed when you pasted it into JSFiddle. You cannot write stuff like <p id="someId" <img ...
• You've got lots of duplicate code which could probably be simplified. Eg the functions containsSymbols and containsCaps could use an array of symbols and loop through them. Or you could use a regex, too.

Other than that, I don't see any issues with your code. A working version is here . I had to change the URLs of the images so that you could actually see them.