javascript - 如何使用 "if else if"语句更改此 <img> 标记的源？

Question

我正在创建一个密码评级器，通过根据用户的密码分数切换 jpeg 图像，以 1-10 的等级(或从深红色到绿色，使用 10 个 jpeg 图像)对用户的密码进行评级。我已经让计算机打印出“passwordPoints”，所以我知道这个变量没问题。我目前在让第二个“if else, else if”语句工作并更改 imageSwaper 源方面遇到了很大的麻烦。我已经检查了 stackoverflow 上关于这个问题的几个指南，发现我实际上做的一切都是正确的......或者看起来是这样。关于为什么这不起作用的任何建议？

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

您的 HTML 无效，就像您没有在 img 标记中为 id 提供 =

<img id "image_Swapper"

还有很多其他的。

这是一个工作片段

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