Question

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>

Answer 1

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;
    }

 }