CODEWITHSUNDEEP
javascriptfunctioninput
Web Owl
Web Owl

Reputation: 569

Javascript counter will not go past 1

So when I click the add button it checks to see if there is text in the input field and then it creates a div for it and then adds +1 to the counter. The problem is the counter; it only adds +1 and then does nothing when clicked again. When I delete a div it does -1 just fine. So yeah, won't go past 1 or -1.

site:

http://web-owl.com/todo/

The function:

 function validateForm() 
            {
                var x=document.forms["forming"]["texting"].value;
                if (x==null || x=="")
                {
                alert("Get it together! You need to have text in there!");
                return false;
                } 
                else 
                {

            var clone = $('#theDiv')
                .clone()
                .attr('id','')
                .show()
                .append(
                $('<div>').html(
                $('#textI2').val()
                ).addClass('futureEditor')
                 );
                $('#hold').append(clone)
                var x = 0;
            x += 1;
            document.getElementById( "clicked" ).value = x;
              return false;
              }

            }

Clicked link:

<form id="forming" name="forming"  onsubmit="return validateForm()" method="post">

Counter:

<p>You have <input id="clicked" size="3" onfocus="this.blur();" value="0" > Stuffs. </p>

Upvotes: 0

Views: 188

Answers (3)

Yograj Gupta
Yograj Gupta

Reputation: 9869

your are always initializing x to 0

var x = 0;

That's why it is displaying alwasys 1.

So make a global variable and use that. like 

var itemsCount = 0;

and in validateForm() function replace line of code

var x = 0;
x += 1;
document.getElementById( "clicked" ).value = x;

to 

itemsCount += 1;
document.getElementById( "clicked" ).value = itemsCount ;

Upvotes: 1

Abraham
Abraham

Reputation: 20694

var x = 0; is causing the problem. You're declaring x to be 0 and adding 1 every time you call validateForm(). So the value of the textbox is set to 1 every time. Here's the fixed code:

var x = 0;
function validateForm() {
  if (x==null || x=="") {
    alert("Get it together! You need to have text in there!");
    return false;
  } 
  else {
    var clone = $('#theDiv')
      .clone()
      .attr('id','')
      .show()
      .append(
        $('<div>').html(
          $('#textI2').val()
        ).addClass('futureEditor')
      );
    $('#hold').append(clone)
    x++;
    document.getElementById( "clicked" ).value = x;
    return false;
  }
}

Upvotes: 2

Diode
Diode

Reputation: 25155

Make your count variable global

var count = 0;
function validateForm() {
    var x = document.forms["forming"]["texting"].value;
    if (x == null || x == "") {
        alert("Get it together! You need to have text in there!");
        return false;
    }
    else {

        var clone = $('#theDiv').clone().attr('id', '').show().append(
        $('<div>').html(
        $('#textI2').val()).addClass('futureEditor'));
        $('#hold').append(clone)
        count++;
        document.getElementById("clicked").value = count;
        return false;
    }

 }

Upvotes: 2

Related Questions