CODEWITHSUNDEEP
javascriptinputdisabled-input
huehuegg
huehuegg

Reputation: 35

How to disable input attribute after 10 clicks?

I am trying to remove the style or the background of a textbox to reveal the content after 10 clicks. How can I do that on Javascript?

here is my html:

<input id="firstN" type="text" style="color:#FF0000; background-color:#FF0000">

and here is my JS:

 function check() {

    var tries++;

    if (tries == 10){
        document.getElementById('firstN').disabled= true;
    }
}

Upvotes: 0

Views: 157

Answers (4)

kadeempardue
kadeempardue

Reputation: 89

Here you go. Remove the alert lines when you see that it works.

<html>
<head>
    <title>Test</title>

    <script>
 function check(){

    var getClicks = parseInt(document.getElementById('firstN').getAttribute('clicks')); //Get Old value

    document.getElementById('firstN').setAttribute("clicks", 1 + getClicks); //Add 1

    if (getClicks === 10){ //Check
        alert('Locked');
        document.getElementById('firstN').disabled= true;
    } else {
        alert(getClicks); //Remove else statement when you see it works.
    }

}

    </script>
</head>
<body>

<form action="#">
    Input Box: <input id="firstN" type="text" style="color:#FF0000; background-color:#FF0000" onclick="check();" clicks="0">
    <input type="submit" name="Submit" value="Submit">
</form>
</body>
</html>

Upvotes: 0

DeeDub
DeeDub

Reputation: 1662

You are instantiating a var "tries" everytime you go into this function. Move the variable up a level to where it will increment:

var btn = document.getElementById("btnclick");
btn.onclick = check;
var tries = 0;
function check() {

    tries++;

    if (tries == 10){
        var ele = document.getElementById("firstN");
        ele.value= "DISABLED";

        ele.disabled = true;
    }
}​

EDIT:

Working JSFiddle

Upvotes: 1

Emily
Emily

Reputation: 6069

The problem is that tries is a local variable (local to the check function). Every time check is called, a new variable named tries is created and initialized to 0.

Try this instead:

var tries = 0;
function check() {
  tries++;
  if (tries == 10) {
    document.getElementById('firstN').style.background = '#ffffff';
  }
}

(I'm assuming that you already have some code to call check when the element is clicked. If not, you need to add a click handler to your element.)

Upvotes: 2

Ben Sewards
Ben Sewards

Reputation: 2661

store it in a cookie:

<script type="text/javascript">var clicks = 0;</script>
<input id="firstN" type="text" style="color:#FF0000; background-color:#FF0000" value="Click" onclick="clicks++">

onclick="$.cookie('clicks', $.cookie('clicks') + 1);"

Upvotes: 0

Related Questions