Wie ändere ich die Quelle dieses <img> Tags mit einer "if else if" -Anweisung?

Question

Ich erstelle einen Passwort-Rater, der das Passwort des Benutzers auf einer Skala von 1-10 (oder von dunkelrot nach grün, mit 10 JPEG-Bildern) bewertet, indem JPEG-Bilder entsprechend der Passwortpunktzahl des Benutzers ausgeschalten werden. Ich habe den Computer, um "passwordPoints" auszudrucken, also weiß ich, dass diese Variable gut ist. Ich habe derzeit sehr viel Mühe, die zweite "wenn sonst, sonst, wenn" Anweisung zu erhalten und die imageSwapper Quelle zu ändern. Ich habe mehrere Guides auf stackoverflow für dieses Problem überprüft und festgestellt, dass ich eigentlich alles richtig mache ... So scheint es jedenfalls. Irgendwelche Vorschläge, warum das nicht funktioniert?

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

Ein paar Fragen:

• Ihre HTML nicht gültig ist. Sie haben es wahrscheinlich bemerkt, als Sie es in JSFiddle eingefügt haben. Sie können nicht schreiben, wie <p id="someId" <img ...
• Sie haben viele doppelte Code, der wahrscheinlich vereinfacht werden könnte. Z.B. Die Funktionen containsSymbols und containsCaps könnten ein Array von Symbolen verwenden und diese durchlaufen. Oder Sie könnten auch eine Regex verwenden.

Ansonsten sehe ich keine Probleme mit Ihrem Code. Eine funktionierende Version ist here. Ich musste die URLs der Bilder ändern, damit Sie sie tatsächlich sehen konnten.

Answer 2

Ihre HTML ist nicht gültig, wie Sie nicht

<img id "image_Swapper" 

Und viele andere = für id in img Tag vorsah.

Hier ist ein Ausschnitt Arbeits

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) { 
 
\t \t if(passwordArray.indexOf("0") > -1 || passwordArray.indexOf("1") > -1 || passwordArray.indexOf("2") > -1 || passwordArray.indexOf("3") > -1 || 
 
\t \t passwordArray.indexOf("4") > -1 || passwordArray.indexOf("5") > -1 || passwordArray.indexOf("6") > -1 || passwordArray.indexOf("7") > -1 || 
 
\t \t passwordArray.indexOf("8") > -1 || passwordArray.indexOf("9") > -1) 
 
\t \t { 
 
\t \t \t return true; 
 
\t \t } 
 
\t \t else 
 
\t \t { 
 
\t \t \t return false; 
 
\t \t } 
 
} 
 

 
function containsCaps(passwordArray) { 
 
\t \t if(passwordArray.indexOf("A") > -1 || passwordArray.indexOf("B") > -1 || passwordArray.indexOf("C") > -1 || passwordArray.indexOf("D") > -1 || 
 
\t \t \t passwordArray.indexOf("E") > -1 || passwordArray.indexOf("F") > -1 || passwordArray.indexOf("G") > -1 || passwordArray.indexOf("H") > -1 || 
 
\t \t \t passwordArray.indexOf("I") > -1 || passwordArray.indexOf("J") > -1 || passwordArray.indexOf("K") > -1 || passwordArray.indexOf("L") > -1 || 
 
\t \t \t passwordArray.indexOf("M") > -1 || passwordArray.indexOf("N") > -1 || passwordArray.indexOf("O") > -1 || passwordArray.indexOf("P") > -1 || 
 
\t \t \t passwordArray.indexOf("Q") > -1 || passwordArray.indexOf("R") > -1 || passwordArray.indexOf("S") > -1 || passwordArray.indexOf("T") > -1 || 
 
\t \t \t passwordArray.indexOf("U") > -1 || passwordArray.indexOf("V") > -1 || passwordArray.indexOf("W") > -1 || passwordArray.indexOf("X") > -1 || 
 
\t \t \t passwordArray.indexOf("Y") > -1 || passwordArray.indexOf("Z") > -1) 
 
\t \t { 
 
\t \t \t return true; 
 
\t \t } 
 
\t \t else 
 
\t \t { 
 
\t \t \t return false; 
 
\t \t } \t 
 
} 
 
\t \t 
 
function containsSymbols(passwordArray) { 
 
\t \t if(passwordArray.indexOf("`") > -1 || passwordArray.indexOf("~") > -1 || passwordArray.indexOf("!") > -1 || passwordArray.indexOf("@") > -1 || 
 
\t \t \t passwordArray.indexOf("#") > -1 || passwordArray.indexOf("$") > -1 || passwordArray.indexOf("%") > -1 || passwordArray.indexOf("^") > -1 || 
 
\t \t \t passwordArray.indexOf("&") > -1 || passwordArray.indexOf("*") > -1 || passwordArray.indexOf("(") > -1 || passwordArray.indexOf(")") > -1 || 
 
\t \t \t passwordArray.indexOf("-") > -1 || passwordArray.indexOf("_") > -1 || passwordArray.indexOf("=") > -1 || passwordArray.indexOf("+") > -1 || 
 
\t \t \t passwordArray.indexOf("[") > -1 || passwordArray.indexOf("]") > -1 || passwordArray.indexOf("\\") > -1 || passwordArray.indexOf(":") > -1 || 
 
\t \t \t passwordArray.indexOf(";") > -1 || passwordArray.indexOf("'") > -1 || passwordArray.indexOf('"') > -1 || passwordArray.indexOf("'") > -1 || 
 
\t \t \t passwordArray.indexOf("<") > -1 || passwordArray.indexOf(">") > -1 || passwordArray.indexOf(",") > -1 || passwordArray.indexOf(".") > -1 || 
 
\t \t \t passwordArray.indexOf("?") > -1 || passwordArray.indexOf("/") > -1) 
 
\t \t { 
 
\t \t \t return true; 
 
\t \t } 
 
\t \t else 
 
\t \t { 
 
\t \t \t return false; 
 
\t \t } \t 
 
}

<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" />