How to compare two javascript variable values defined in two functions

Question

I have two javascript functions like below which wll count the non-blank lines from textareas.

HTML:

<div id="map-devlist" >
    <div class="block-with-text-area">
    <div class="input-quest-with-text-area">Enter your device list(one device in one line)</div>
    <div class="input-resp-with-text-area"><span><textarea  class="textarea" id="devs" name="devs" type="text" onkeyup="devscount();"></textarea></span> </div> 
    </div>
</div>

<div id="lunidlist" >
    <div class="block-with-text-area">
        <div class="input-quest-with-text-area">Enter your LUN IDs in Hex(one ID in one line)</div>
        <div class="input-resp-with-text-area"><span><textarea  class="textarea" id="lunids" name="lunids" type="text" onkeyup="luncount();"></textarea></span> </div>  
    </div>
</div>

<div id="error1"></div>

Javascript:

function devscount()
{
    devcounts = 0;
    var lines = $("#devs").val().split("\n");
    for (var i = 0; i < lines.length; i++) {
        if (lines[i].length > 0) devcounts++;
    }
}   

function luncount()
{
    luncounts = 0;
    var lines = $("#lunids").val().split("\n");
    for (var i = 0; i < lines.length; i++) {
        if (lines[i].length > 0) luncounts++;
    }

    if(devcounts == luncounts) {
        var message ="both counts are matching";
    } else {
        var message ="Mismatch between values";
        document.getElementById('error1').innerHTML=message;
    }
}

Now I would like to compare the line count on these two textareas and if they are equal and not equal I need to display a message. But the above script not working for me. When I echo document.getElementById('error1').innerHTML=devscount; and document.getElementById('error1').innerHTML=luncounts; on their corresponding function, it showing the line count perfectly. But I am not able able to compare their values. how to do that ?

JSFIDDLE SETUP

Since the variables are included in the functions, they won't see each other, if you declare them outside the 2 functions, you can compare them, as they will be in the same scope — Stephen Raghunath
– Stephen Raghunath, Commented Oct 15, 2013 at 11:53
Make the variables global and set their values inside functions. — Jay Bhatt
– Jay Bhatt, Commented Oct 15, 2013 at 11:53

Reinstate Monica Cellio · Accepted Answer · 2013-10-15 12:38:18Z

2

The problem with your jsfiddle wasn't just the question alone. There was also an issue with the way you were trying to check the values. The 2 text areas were running the functions to count items in them, on keyup, but not running the comparison code. I changed them both to run a 3rd function, checkcounts, and modified the script to this...

var devcounts;
var luncounts;

function devscount() {
    devcounts = 0;
    var lines = $("#devs").val().split("\n");
    for (var i = 0; i < lines.length; i++) {
        if (lines[i].length > 0) devcounts++;
    }
}   

function luncount() {
    luncounts = 0;
    var lines = $("#lunids").val().split("\n");
    for (var i = 0; i < lines.length; i++) {
        if (lines[i].length > 0) luncounts++;
    }
}

function checkcounts() {
    devscount();
    luncount();

    var message;

    if(devcounts == luncounts) {
        message ="both counts are matching";
    } else {
        message ="Mismatch between values";
    }

    document.getElementById('error1').innerHTML=message;
}

Working jsfiddle...

edited Oct 15, 2013 at 12:38

answered Oct 15, 2013 at 11:53

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

acr Over a year ago

I have tried the first method. but it doesnt show the message. please have a look here : jsfiddle.net/NgGAZ/4

Reinstate Monica Cellio Over a year ago

I've fixed what you had in the jsfiddle. As well as your question here there were a few other issues, like not actually comparing the counts on textarea keyup. Here's a working version... jsfiddle.net/NgGAZ/7

acr Over a year ago

thanks it worked. Is there anyway I can hide the message until and unless I enter data on both boxes ? here as soon as i enter value in first column it showing error message

Reinstate Monica Cellio Over a year ago

Just remove the onkeyup handler from the first text area. You could use onchange or onblur for the second text area as well, so it only checks when you leave it.

DroidOS · Accepted Answer · 2013-10-15 12:04:55Z

2

It strikes me that you are writing an awful lot of code to do something very very simple. I have replaced your code in this fiddle. A single function

function testCounts()
{
 var devCounts = $('#devs').val().split('\n').length;
 var lunCounts = $('#lunids').val().split('\n').length;
 var equals = (devCounts == lunCounts)?'Equal':'Not Equal';
 $('#error1').text(equals);
}

Or am I getting this entirely wrong.

answered Oct 15, 2013 at 12:04

DroidOS

9,02818 gold badges119 silver badges191 bronze badges

2 Comments

acr Over a year ago

if i put value in first code it displaying equal eventhough the second textarea empty..

DroidOS Over a year ago

That is an entirely unrelated issue. You need to strip out the empty strings in the array created from the text area content. See this fiddle

Collectives™ on Stack Overflow

How to compare two javascript variable values defined in two functions

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related