Learn JavaScript Lesson 7 : Count Down

This is the final article in our series on JavaScript. In this article we are going to take what we have learnt and create a new script that will count down the number of characters entered into a text question.

The first thing is the basic html and metadata code. We have called our template “Count.html”

 
Click
  
 

TEMPLATE WORKING !!!



In this template we can see that we have created a Setup function , that does not do anything at this stage, but we have got it to run on the load of the page. Next we need to create our metadata.

Metadata(en-AU, Question, Label)
Q1 "Comments" Text [1..100];
End Metadata
Routing(Web)
Q1.LayoutTemplate = "Count.html"
Q1.Ask()
End Routing

When all that is working the next thing we need to do it to find the name of our text box … As before , run your script and view source and you should see that the text box is called “_QQ1”. Thinking about what we want to do , you should be able to figure out that we need to do something when a key is pressed. To capture a key press in JavaScript we can use the “onkeypress” or “onkeyup” functions, so that should tell us that we need to add the following JavaScript to our template.

if(document.mrForm._QQ1 != null)
{
 document.mrForm._QQ1.onkeypress = function() { // DO SOMETHING }
}
if(document.mrForm._QQ1 != null)
{
 document.mrForm._QQ1.onkeyup = function() { // DO SOMETHING }
}

we should also think about adding a text box or something to the template file so that the user can see how many characters they have left to type. To do this we add the following HTML code to the body of our template.


Characters Remaining
    
    

Make sure you give your text box and id, as we will need to use this id to store the number of characters that are left to type. With all this code in place and working we are then ready to move onto the next step of creating some functions to do the calculations. If we think a little we will discover that we need to create a routine to

    Read the number of characters already typed.
    Check that the max length has not been exceeded.
    Display the number of characters remaining.

So let’s make some changes to our JavaScript. Firstly we will add the function names to the two events

if(document.mrForm._QQ1 != null)
{
 document.mrForm._QQ1.onkeypress = function() { return MaxLength(this, 99); }
}
if(document.mrForm._QQ1 != null)
{
 document.mrForm._QQ1.onkeyup = function() { len_display(this,100,'long_len'); }
}

So what have we done , well we have said that we are going to create a function called MaxLength and this function will pass in the object that it is connected to , in this case it would be “_QQ1”. We will also pass in the maximum number of characters allowed minus one. So in this case 99 as we set our text question size in IOM to be 100. We have also said that we are going to create a function called display that again , passes in the object that it is connected to which in this case would be “_QQ1”, followed by the maximum number of characters allowed and then finally the name of the object used to hold the value.

now we know what they are going to do , we should actually create them. To start with we will create the MaxLenght function. The code for this is as follows.

function MaxLength(Object, MaxLen)
{
      return (Object.value.length <= (MaxLen));
}

So what does this do , well it checks the number of characters that it has in the specified object ( _QQ1 )  and makes sure it is less than or equal to the MaxLen ( 99 ) if it is less than or equal to, a value of True is passed back and the key press is allowed. If it is false, then the key press is not allowed.

Next we need to add our display code. Type the following code in.

function len_display(Object,MaxLen,element)
{
 var len_remain = MaxLen-Object.value.length;
 if(len_remain >=0){
 document.getElementById(element).value=len_remain;
        }
}

In this function we create a variable called "len_remain" and set it to the MaxLen "100"  minus the length of the specified object "our text box". If the answer to this equation is greater than or equal to 0 we store the answer "len_remain" in our text box "long_len".

Count Down
Count Down

And there you have it , you will end up with the above screen when everything is correct and as you type or delete any characters in your text box the number will go up and down. Hopefully these articles have given you enough information to go away and work on some of your own examples , but as always if you would like us to help you with something drop us an email and we will see what we can do.

2 thoughts on “Learn JavaScript Lesson 7 : Count Down”

  1. Nice example that needs a few modifications to make this work, namely:-

    1) —> This value should be set to 100 to be consistent with the variable

    2) document.mrForm._QQ1.onkeyup = function() { display(this,100,’long_len’); } —> The function called should be len_display rather than display

    Additionally, if anyone is interested, I will post another example of extending this futher by using additionally properties to automate the whole process i.e.
    a) it will automatically detect the max range,
    b) the variable name does not need to be explicitly mentioned and
    c)no modifications to the main template would be necessary.

  2. Thanks for pointing out the typos Richard. We have made the changes and we would love you to add another post on how to take this further.

    We have upgraded your login to an editor just for this purpose… Please contact us via email if you have any issues.

Leave a Comment

%d bloggers like this: