...

View Full Version : Javascript help



akhandal96
10-07-2011, 04:56 PM
I designed a simple mobile in html , i want to link it to strings such that....

example :
there are numbers from 0 to 9 and when ever i click on a number and then click on another after all the click i made and at last when i click on the " dial" (for example purpose) it should prompt all the numbers in sequence where i click.
example to make it clear for my purpose :

1 2 3
4 5 6
7 8 9
* 0 #
Dial (button)

I clicked on "4" then "6" then "9" and then i hit the "dial" button the it shold show an alert box displaying "469" .
I think it isn't a big challenge for you javascript coders.
Please post the whole javascript code for this function, also the id's defined to the html separetly by you
I am just learning and up on queries , so want your help
Thaks a ton :)

blaze4218
10-07-2011, 05:15 PM
post the whole javascript code for this function, also the id's defined to the html separetly by youAre you for real?



I am just learning and up on queries
If you want to learn, here is a lesson:


Your post implies that you already made the keypad in HTML. Let's assume that is true and go from there. With each keypress you should store the keypress value into a variable by adding the following to each HTML element:
onclick="dialString+=KeyPressValue;"

Here is an example:


<script>
dialString = '';
</script>
<button type="button" name="OneKey" value="1" onclick="dialString+='1';">1</button>
<button type="button" name="DialKey" onclick="alert(dialString);">Dial</button>

If your keypad looks different than my <button> example, you should show what you have so we can help make it better...

If you want more help you should demonstrate an effort to try and learn this.

xelawho
10-07-2011, 05:27 PM
like this?



<html>
<head>
</head>
<body>
<style>
.num{
display:inline;
}
</style>
<div>
<div class="num" onclick="enterNum(1)">1</div><div class="num"onclick="enterNum(2)">2</div><div class="num"onclick="enterNum

(3)">3</div>
</div>
<div>
<div class="num" onclick="enterNum(4)">4</div><div class="num"onclick="enterNum(5)">5</div><div class="num"onclick="enterNum

(6)">6</div>
</div>
<div>
<div class="num" onclick="enterNum(7)">7</div><div class="num"onclick="enterNum(8)">8</div><div class="num"onclick="enterNum

(9)">9</div>
</div>
<div>
<div class="num" onclick="enterNum('*')">*</div><div class="num"onclick="enterNum(0)">0</div><div

class="num"onclick="enterNum('#')">#</div>
</div>
<input type="button" value ="dial" onclick="dial()">
<script type="text/javascript">

var number="";

function enterNum(num) {
number=number.concat(num);
}

function dial() {
alert (number);
}
</script>

ironboy
10-07-2011, 05:55 PM
Or like that:


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {margin:0;padding:0;font:13px Verdana, Geneva, sans-serif}
body {margin:20px}
.num {display:inline-block;border:1px solid #000;padding:5px;width:20px;text-align:center}
input {margin-top:12px}
#wholeNum {border:1px solid #000;padding:5px;margin-bottom:12px;height:16px;width:200px}
</style>
<script type="text/javascript">
onload = function(){
var i, number = [], divs = document.getElementsByTagName('div');
for(i = 0; i < divs.length; i++){
divs[i].className == 'num' && (divs[i].onclick = function(){
number.push(this.innerHTML);
document.getElementById('wholeNum').innerHTML = number.join('');
});
};
document.getElementById('dial').onclick = function(){
alert('Dialing ' + number.join(''));
};
};
</script>
</head>
<body>
<div id="wholeNum"></div>
<div>
<div class="num">1</div><div class="num">2</div><div class="num">3</div>
</div>
<div>
<div class="num">4</div><div class="num">5</div><div class="num">6</div>
</div>
<div>
<div class="num">7</div><div class="num">8</div><div class="num">9</div>
</div>
<div>
<div class="num">*</div><div class="num">0</div><div class="num">#</div>
</div>
<input type="button" value ="dial" id="dial">
</body>
</html>

Please, let's not code like it's 1998... We can separate event assigning from html.

blaze4218
10-07-2011, 06:30 PM
And here I thought I could make a difference by actually teaching a man to fish, but if everyones just going to give him the full code and all he had to do was give you the specifications then perhaps you would like to design my "simple" application for free too.here's the specifications (http://www.codingforums.com/showthread.php?t=139382)

xelawho
10-07-2011, 08:45 PM
aw, don't be like that, Blaze - I didn't realise you were conducting tutorials now. next time give us a bit of notice, K?

DanInMa
10-07-2011, 08:47 PM
group hug!
http://static.tvtropes.org/pmwiki/pub/images/GroupHug.jpg

blaze4218
10-07-2011, 09:31 PM
I was only poking a little fun(did you click the link? it had a joke submission for a ridiculous question), but the other link I considered and decided against was of someone chastising the "helper" for doing all the work and diminishing the value of the profession to a mere hobby whereby anyone should be expected to provide solutions to all problems and no one should ever expect to pay, because
it isn't a big challenge for you javascript coders Not that this would affect me, because I've never made any money off javascript to begin with.(hmmmm, food for thought?)
But I did decide against that link because it might be rude, and the two of you have been so helpful to me :)
I'm not giving lessons anymore than anyone else here :p The only reason I post solutions at all is to lessen the burden of the guys that actually know what their doing, so they have more time for the tough questions... just my way of giving back :cool:

ironboy
10-07-2011, 09:48 PM
:) No offense taken - I basically agree with you - I mostly reacted to all the inline event assignments - I we are going to teach our young (hopefully more so than ignorant) - let's not teach them something you would never see in professional code today...


Not that this would affect me, because I've never made any money off javascript to begin with.(hmmmm, food for thought?)

Well, I have :D - but I can ensure you the script above would not make me any money.

blaze4218
10-07-2011, 10:00 PM
I agree with you about not teaching something that you wouldn't actually use, and for-what-it's-worth the end result wouldn't have been done that way, so maybe I shouldn't have. But I was demonstrating the most basic principle involved: storing the accumulated values, and that was what came to mind first.
If you want more help you should demonstrate an effort to try and learn this.

blaze4218
10-07-2011, 10:15 PM
BTW, you might be able to assure me of that; but I assure you, you couldn't ensure it...
http://www.ehow.com/how_2081944_use-assure-ensure-insure-correctly.html

DaveyErwin
10-07-2011, 10:37 PM
Or even like this for better
visual effect ...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="daveyerwin">
<title>Untitled</title>
<script type="text/javascript">
function activateKeyPad(){
var numbers="";
var btns = document.getElementById("keyPad").document.getElementsByTagName("button");
for(var i=btns.length;i--;)
btns[i].onclick=function(){numbers += " "+this.innerHTML;};
btns(btns.length-1).onclick=function(){alert(numbers);numbers=""}
}
</script>
<style type="text/css">
td{padding:0;margin:0;}
button{width:2em;}
</style>
</head>
<body onload="activateKeyPad()">
<div id="keyPad">
<table>
<tr>
<td><button type="button">1</button></td><td><button type="button">2</button></td><td><button type="button">3</button></td>
</tr>
<tr>
<td><button type="button">4</button></td><td><button type="button">5</button></td><td><button type="button">6</button></td>
</tr>
<tr>
<td><button type="button">7</button></td><td><button type="button">8</button></td><td><button type="button">9</button></td>
</tr>
<tr>
<td><button type="button">*</button></td><td><button type="button">0</button></td><td><button type="button">#</button></td>
</tr>
<tr>
<td colspan="3"><button type="button" style="width:7em;">DIAL</button></td>
</tr>
</table
</div>
</body>
</html>

ironboy
10-07-2011, 10:42 PM
@blaze4218:
:D God, it's hard being a poor spluttering Swede - of course I meant "assure". I can see that clearly now.

blaze4218
10-07-2011, 10:45 PM
@ironboy, your too funny, and a good sport!

jmrker
10-08-2011, 05:00 AM
Or even like this for better
visual effect ...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="daveyerwin">
<title>Untitled</title>
<script type="text/javascript">
function activateKeyPad(){
var numbers="";
var btns = document.getElementById("keyPad").document.getElementsByTagName("button");
for(var i=btns.length;i--;)
btns[i].onclick=function(){numbers += " "+this.innerHTML;};
btns(btns.length-1).onclick=function(){alert(numbers);numbers=""}
}
</script>
<style type="text/css">
td{padding:0;margin:0;}
button{width:2em;}
</style>
</head>
<body onload="activateKeyPad()">
<div id="keyPad">
<table>
<tr>
<td><button type="button">1</button></td><td><button type="button">2</button></td><td><button type="button">3</button></td>
</tr>
<tr>
<td><button type="button">4</button></td><td><button type="button">5</button></td><td><button type="button">6</button></td>
</tr>
<tr>
<td><button type="button">7</button></td><td><button type="button">8</button></td><td><button type="button">9</button></td>
</tr>
<tr>
<td><button type="button">*</button></td><td><button type="button">0</button></td><td><button type="button">#</button></td>
</tr>
<tr>
<td colspan="3"><button type="button" style="width:7em;">DIAL</button></td>
</tr>
</table
</div>
</body>
</html>

One minor fix to make it display:


// change
// btns(btns.length-1).onclick=function(){alert(numbers);numbers=""}
// to
btns[btns.length-1].onclick=function(){alert(numbers);numbers=""}

Old Pedant
10-08-2011, 07:02 AM
Regarding: http://www.codingforums.com/showthread.php?t=139382

LMAO! Wish I had been there back then! *TOO* funny.

Old Pedant
10-08-2011, 07:09 AM
@ironboy, your too funny, and a good sport!

Okay, Blaze, you asked for it...

When you wrote "your too funny", did you mean his too funny joke? His too funny looks? His too funny bone?

The word "your" is *ONLY* a possessive pronoun. As in "that thing belonging to you." Same as "my" or "his" or "her".

The *contraction* you're is short for "you are" and I'm sure is what you meant.

<grin style="evil" />

Hey, I'm not just pedantic about coding! In fact, my "old pedant" tag was given to me because of my predilection to correct a certain person's grammar. (Except the funniest part is that my sister is MUCH worse than I am. She was a high school English teacher for mumblety-mumble years and it shows.)

blaze4218
10-08-2011, 08:02 PM
yeah I did ask for that one, and you got me good. ARG! Too fast typing, make many mistakes do I ;)

style="evil" lolz

ironboy
10-08-2011, 09:00 PM
Type slower must you. Find keyboard balance. Battle IE you must.

DaveyErwin
10-08-2011, 10:47 PM
One minor fix to make it display:


// change
// btns(btns.length-1).onclick=function(){alert(numbers);numbers=""}
// to
btns[btns.length-1].onclick=function(){alert(numbers);numbers=""}


Thank you for pointing that out.
While this is still fresh in our
minds , try this in ie7 and google chrome


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="daveyerwin">
<title>Untitled</title>
<script type="text/javascript">
function init(){
btns=document.getElementsByTagName("button");
alert(btns(2).innerHTML)//alerts 2 in ie7 and google chrome ????
}
</script>
</head>
<body onload="init()">
<button>0</button><button>1</button><button>2</button>
</body>
</html>

the explanation is , some browsers
provide a function for referencing
an HTMLcollection.

akhandal96
10-09-2011, 08:04 AM
Thanks to all , i just wanted abn example how it works !:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum