11 Replies - 644 Views - Last Post: 15 June 2012 - 02:02 PM

#1 jmotyljr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 08-December 11

problem with keyup function logic.

Posted 15 June 2012 - 12:03 AM

What i want to happen:
User types a bunch of number keys than presses the enter key. When the enter key is pressed it will show all those keys that were just pressed as a whole string. If someone enters the 'backspace' than we can do something like:
str = str.substring(0, str.length - 1);

I have tried my hands at all sorts of GOOGLE terms and im stumped. Im in desperate need of advice.

Code:
$(function() {
    var str = ""; //Variable to be displayed
    
    $(document.body).keyup(function(e) {
        if ( ( e.which >= 48 ) && ( e.which <= 57 ) ) { //Test only numbers
            str += String.fromCharCode(e.keyCode); //Add ascii codes into a string
            if ( e.which === 13 ) { //Test for the enter key
                console.log(str); //Display the string of chars that were typed
            }
            str = ""; //Reset the var back to "";
        } else { //Other than number typed
            e.preventDefault(); //Stoping, 'return' causes errors in console.
        }
    });
});​


Is This A Good Question/Topic? 0
  • +

Replies To: problem with keyup function logic.

#2 tlhIn`toq  Icon User is offline

  • Closing in on 5,000
  • member icon

Reputation: 4928
  • View blog
  • Posts: 10,465
  • Joined: 02-June 10

Re: problem with keyup function logic.

Posted 15 June 2012 - 12:20 AM

'then' not 'than'


you have a good concept with the substring for a length 1 less than the current length. Why don't we see you trying it in your code?

You obviously know how to do an if check to test for the backspace. Why don't we see you trying that in your code either?

We can't help you with why your code isn't working if the parts that aren't working are gone.

TIP:
Don't replace lines of code that don't work. Instead comment them out and put your new attemps below that. This will keep you from re-trying the same ideas over and over. Also, when you come back to us saying "I've tried this 100 different ways and still can't get it", we can actually see what you tried. So often a failed attempt is very very close and just needs a little nudge in the right direction. So if we can say "See what you did in attempt 3... blah blah" it helps a lot

Spoiler

Was This Post Helpful? 0
  • +
  • -

#3 jmotyljr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 08-December 11

Re: problem with keyup function logic.

Posted 15 June 2012 - 12:28 AM

Thank you for the super quick reply. Im going to get together my original code and ill repost here in a moment. Thank you again.
Was This Post Helpful? 0
  • +
  • -

#4 tlhIn`toq  Icon User is offline

  • Closing in on 5,000
  • member icon

Reputation: 4928
  • View blog
  • Posts: 10,465
  • Joined: 02-June 10

Re: problem with keyup function logic.

Posted 15 June 2012 - 12:33 AM

Its 0230hrs. I'm going to get some rack time. But that updated code snippet will be helpful and I'm sure someone else will jump in to help before I wake back up.
Was This Post Helpful? 1
  • +
  • -

#5 jmotyljr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 08-December 11

Re: problem with keyup function logic.

Posted 15 June 2012 - 12:40 AM

$(function() {
	/* Empty string variable that will hold chars */
	var str = ""; 

	$(document.body).keyup(function(e) {
		/* Testing to allow only 0 - 9 to be typed */
		if ( ( e.which >= 48 ) && ( e.which <= 57 ) ) {
		/* str holds the values of all the numbers types as a string */
			str += String.fromCharCode(e.keyCode); 
			/* if the backspace button is hit, */ 
			if ( e.which === 8 ) {
				/*than take the last char away from str */
				str = str.substring(0, str.length - 1);
			}
			/* If the enter key is pressed */
			if ( e.which === 13 ) {
				/*Display the final results of str */
				console.log(str); 
			}
			str = ""; 	/* resetting the str variable */
			} else { 	
				e.preventDefault(); 						
			}
	});
});


Was This Post Helpful? 0
  • +
  • -

#6 tlhIn`toq  Icon User is offline

  • Closing in on 5,000
  • member icon

Reputation: 4928
  • View blog
  • Posts: 10,465
  • Joined: 02-June 10

Re: problem with keyup function logic.

Posted 15 June 2012 - 08:02 AM

I'm a C# guy - let's just be clear about that. And because of that I find the style of java/javascript style of having the leading { on the end of the line just makes it really hard to see what code blocks are nested within other blocks.

By aligning the { and } and properly (C# properly) indenting the blocks it becomes a bit more clear to read (at least to me)

It quickly becomes clear that any time a number is pressed (line 536 passes the if condition test) that you clear the str after every keypress (line 552 in my screenshot). How would this variable EVERY become a long string of numbers like "1458"?

Attached Image
Was This Post Helpful? 0
  • +
  • -

#7 jmotyljr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 08-December 11

Re: problem with keyup function logic.

Posted 15 June 2012 - 11:14 AM

Assigning the variable again as empty would be better well served in whatever action will display the final result. Let me write out what i want to accomplish in pseudo code and maybe that will explain my goals and maybe help me understand what i need to do a little better.
// When a key is pressed and released
// Save all the chars into a string
// Test for user hitting 'backspace'
// If the user hits a 'backspace' than resuce the string size by one
// When the user hits the enter key, return all chars typed as string.

I would normally test for something like this with a regex inside of an input but due to my requirements, i need to test for it within the actual page, or $(document.body)

And about the bracing, i agree with you. Having braces inline and lined up are much easier to read. I am continuing to work on this so im not giving up on this. I appreciate the help you are providing so far.
Was This Post Helpful? 0
  • +
  • -

#8 jmotyljr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 08-December 11

Re: problem with keyup function logic.

Posted 15 June 2012 - 11:23 AM

I had originally started off with this code:

var str = "";

$(document.body).keyup(function(event) {
    // Passed keyCode values into str as a string
    str += String.fromCharCode(event.keyCode);
    
    // If enter key was pressed
    if ( event.which === 13 )
    {
        // Display the chars as a string
        console.log(str);
        // Reset the string back to empty
        str = "";
    }
});​


But now i am trying to only allow the use of numbers to be pressed. Along with that, i am trying to test for the 'backspace'.
Was This Post Helpful? 0
  • +
  • -

#9 tlhIn`toq  Icon User is offline

  • Closing in on 5,000
  • member icon

Reputation: 4928
  • View blog
  • Posts: 10,465
  • Joined: 02-June 10

Re: problem with keyup function logic.

Posted 15 June 2012 - 12:21 PM

I understand what you're trying to do.

What I'm saying is that you ALWAYS reset str to "" any time a number is entered. The string never grows beyond the most recent entry.

In your original code it only cleared if the character was 13 (enter)

But in your chagned version that clear is NOT within that check for enter. Notice it is outside of those braces sitting on line 552 in my screenshot.

It is only within the braces for the if that checks for a number: No other qualification or condition.
Was This Post Helpful? 0
  • +
  • -

#10 jmotyljr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 08-December 11

Re: problem with keyup function logic.

Posted 15 June 2012 - 01:40 PM

View PosttlhIn`toq, on 15 June 2012 - 12:21 PM, said:

It is only within the braces for the if that checks for a number: No other qualification or condition.

Ok, let me back up i guess. I understand what you are saying about the var resetting after every input outside of the condition.

Forget my original code, because im starting to get confused because im working with code that doesnt work. The code below does work, but i want to add to it. I put this in form of a function called func and will run whenever there is a keyup. It acts the way i want in which it will display the string when the enter key is pressed.
$(function() 
{
	var str = "";
	$(document.body).keyup(function(event) 
	{
		func();
	});

	function func() 
	{
		str += String.fromCharCode(event.keyCode);
		
		if ( event.which === 13 )
		{
			console.log(str);
			str = "";
		}
	}
});


Below, this is how i feel as if im testing to ONLY allow numbers to be pressed. But, it is not working and this is where im having a problem with logic.

if ( event.which === 13 )
{
	if ( ( event.which >= 48 ) && ( event.which <= 57 ) )
	{
		console.log(str);
		str = "";
	}
	else
	{
		event.preventDefault();
	}
}

This post has been edited by jmotyljr: 15 June 2012 - 01:41 PM

Was This Post Helpful? 0
  • +
  • -

#11 tlhIn`toq  Icon User is offline

  • Closing in on 5,000
  • member icon

Reputation: 4928
  • View blog
  • Posts: 10,465
  • Joined: 02-June 10

Re: problem with keyup function logic.

Posted 15 June 2012 - 01:44 PM

Maybe its a javascript specific thing about func's, but you lost me.

I guess I'm far enough out of my element here to no longer be helpful.
Was This Post Helpful? 0
  • +
  • -

#12 jmotyljr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 08-December 11

Re: problem with keyup function logic.

Posted 15 June 2012 - 02:02 PM

View PosttlhIn`toq, on 15 June 2012 - 01:44 PM, said:

Maybe its a javascript specific thing about func's, but you lost me.

I guess I'm far enough out of my element here to no longer be helpful.

I really do appreciate the help you have given so far. I do not understand the c# language but do you think it would be possible for you to replicate what i am trying to do in JS, but in c#. Just so i can look at the logic, because i am a new programmer and i may be missing the fundamentals of something or just explaining what i want to do in a horrible way.

I have been wrecking my brain over this the past few days and i see all kinds of examples off google but nothing that pertains to what im trying to do. I've read through my Javascript book and its all theory and super D duper basic stuff. Im at my witts end here!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1