CODEWITHSUNDEEP
javascript
Arash Kadkhodaei
Arash Kadkhodaei

Reputation: 17

function is not working in my code

my problem is that text3 is undefined in my codes in here:

t += text2 + "Case #" + i + ":" + "<br>" + text3 + "<br>";

but it is here:

$('#pass').keyup(function (e) {
    var strong = new RegExp("^(?=.{11,})(((?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W))|((?=.*[A-Z])(?=.*[a-z])(?=.*\\W))|((?=.*[a-z])(?=.*[0-9])(?=.*\\W))|((?=.*[A-Z])(?=.*[0-9])(?=.*\\W))|((?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]))).*$", "g");
    var normal = new RegExp("^(?=.{4,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[a-z])(?=.*\\W))|((?=.*[0-9])(?=.*\\W))).*$", "g");
    if (strong.test($(this).val())) {
        text3 = "strong";
    } else if (normal.test($(this).val())) {
        text3 = "normal";
    } else {
        text3 = "weak";
    }
    return true;
});

here is all of my code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<p><input placeholder="number of tests" type="text" name="numbers" id="x"/></p>
<div id="passdiv"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

    $('#x').keyup(function (e) {

        var i;
        var text2 = '';
        var t = "";
        var x = document.getElementById("x").value;
        for (i = 1; i <= x; i++) {
            text2 = '<p><input placeholder="test NO. ' + i + '" type="password" id="pass" /></p>';
            t += text2 + "Case #" + i + ":" + "<br>" + text3 + "<br>";
        }
        document.getElementById("passdiv").innerHTML = t;

        return true;
    });

    $('#pass').keyup(function (e) {
        var strong = new RegExp("^(?=.{11,})(((?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W))|((?=.*[A-Z])(?=.*[a-z])(?=.*\\W))|((?=.*[a-z])(?=.*[0-9])(?=.*\\W))|((?=.*[A-Z])(?=.*[0-9])(?=.*\\W))|((?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]))).*$", "g");
        var normal = new RegExp("^(?=.{4,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[a-z])(?=.*\\W))|((?=.*[0-9])(?=.*\\W))).*$", "g");
        if (strong.test($(this).val())) {
            text3 = "strong";
        } else if (normal.test($(this).val())) {
            text3 = "normal";
        } else {
            text3 = "weak";
        }
        return true;
    });

</script>
</body>
</html>

what is the problem? please help

Upvotes: 1

Views: 146

Answers (3)

roryok
roryok

Reputation: 9645

text3 is not set as a variable in your code, therefore it's always going to be undefined. You need to set it before your two functions.

Note: I also put things inside a jQuery ready function.

For some reason I'm being downvoted, but I tested this and it works

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<p><input placeholder="number of tests" type="text" name="numbers" id="x"/></p>
<div id="passdiv"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){
    // set text3 in here first
    var text3 = "";

    $('#x').keyup(function (e) {

        var i;
        var text2 = '';
        var t = "";
        var x = document.getElementById("x").value;
        for (i = 1; i <= x; i++) {
            text2 = '<p><input placeholder="test NO. ' + i + '" type="password" id="pass" /></p>';
            t += text2 + "Case #" + i + ":" + "<br>" + text3 + "<br>";
        }
        document.getElementById("passdiv").innerHTML = t;

        return true;
    });

    $('#pass').keyup(function (e) {
        var strong = new RegExp("^(?=.{11,})(((?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W))|((?=.*[A-Z])(?=.*[a-z])(?=.*\\W))|((?=.*[a-z])(?=.*[0-9])(?=.*\\W))|((?=.*[A-Z])(?=.*[0-9])(?=.*\\W))|((?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]))).*$", "g");
        var normal = new RegExp("^(?=.{4,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[a-z])(?=.*\\W))|((?=.*[0-9])(?=.*\\W))).*$", "g");
        if (strong.test($(this).val())) {
            text3 = "strong";
        } else if (normal.test($(this).val())) {
            text3 = "normal";
        } else {
            text3 = "weak";
        }
        return true;
    });

});
</script>
</body>
</html>

Also here's a fiddle of it working http://jsfiddle.net/gsuy4t27/

Upvotes: -1

veritas
veritas

Reputation: 2052

Your call $('#x').keyup(function (e) { is creating the first event listener so on keyup you will always endup with text3 is undefined because the $('#pass').keyup(function (e) { will be triggered always later.

EDIT:

Your second keyup handler will never work because it will grab the #pass element only once (during document parse). You need to create some defered listener to fix it. // Anyway this won't fix your text3 is undefined problem.

What you need to do is define it first before the two .keyup handlers.

NOTE:

But please avoid setting global variables anyway ;) Put everything into a closure or something.

Last but not least DO NOT create many elements with the same ID this is a major bug.

Upvotes: -1

danmullen
danmullen

Reputation: 2510

Looks like $('#x').keyup() is being called before $('#pass').keyup()

Upvotes: 1

Related Questions