如何使用“if else if”语句更改此<img/>标记的来源？

时间：2016-04-13 01:27:44

标签： javascript image src

我正在创建一个密码评估者，根据用户的密码分数，通过切换jpeg图像，以1-10的等级（或从深红色到绿色，具有10个jpeg图像）对用户的密码进行评级。我有计算机打印出“passwordPoints”，所以我知道这个变量很好。我目前在第二个“if else，else if”语句工作并更改imageSwapper源时遇到了很大的麻烦。我已经在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";
}

2 个答案:

答案 0 :(得分：1)

您的HTML无效，就像您未在=代码中为id提供img 

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

答案 1 :(得分：0)

有几个问题：

  • 您的HTML无效。当你将它粘贴到JSFiddle中时，你可能已经注意到了。你不能写<p id="someId" <img ...
    • 之类的东西
  • 你有很多重复的代码可能会被简化。例如。函数containsSymbols和containsCaps可以使用符号数组并循环遍历它们。或者你也可以使用正则表达式。

除此之外，我认为您的代码没有任何问题。工作版本为here。我不得不更改图像的URL，以便您可以实际看到它们。

相关问题
最新问题