2016-04-13 7 views
0

私は、ユーザーのパスワードスコアに応じてjpegイメージを切り替えることによって、ユーザーのパスワードを1から10のスケールで(または暗赤色から緑色に、10個のjpegイメージで)評価するパスワード評価を作成しています。私は "passwordPoints"を印刷するためのコンピュータを持っているので、この変数が問題ないことは分かっています。私は現在、2番目のif else else if文を取得してimageSwapperソースを変更するのに苦労しています。私はこの問題のためのstackoverflowのいくつかのガイドをチェックし、私は実際にすべての権利を行っていることがわかった...またはそうだ。なぜこれが機能していないのかについての示唆はありますか?<img>タグのソースをif if else文でどのように変更すればよいですか?

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"; 
} 
+0

のですか?エラー? –

+0

何も起こりません。変数 "passwordPoints"に応じて、 "imageSwapper" srcをこれらの10個のイメージのいずれかに変更する必要があります。 – Mangofett

+0

HTMLを共有できますか?これをデバッグしましたか? 'if'ステートメントのどれにも入りますか? –

答えて

0

問題のカップル:

  • あなたのHTMLが有効ではありません。おそらく、JSFiddleに貼り付けたときに気づいたでしょう。 <p id="someId" <imgのようなものを書くことはできません。
  • おそらく単純化することができる重複したコードがたくさんあります。例えば。 containsSymbolscontainsCapsは、シンボルの配列を使用してそれらをループすることができます。または正規表現を使用することもできます。それ以外

、私はあなたのコードに問題が表示されません。作業バージョンはhereです。実際に見ることができるように、画像のURLを変更する必要がありました。

1

あなたはimgタグ

<img id "image_Swapper" 

そして、多くの他にidため=を提供しなかったようにあなたのHTMLは、有効ではありません。ここで

は、あなたが実際にどのような問題を抱えている作業スニペット

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

+0

私のところでは素人間違いです。私はここに来る前にHTMLバリデーターを通して自分のコードを実行するべきです。再び起こらないだろう。私は非常に参考になったスニペットに感謝します! – Mangofett

+0

お手伝いします。あなたの問題を解決した場合、または解決策を見つけるのに最も役立った場合は、回答を受け入れたものとしてマークしてください。 – Munawir

関連する問題