Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21

Thread: Javascript help

  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Javascript help

    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

  • #2
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    Quote Originally Posted by akhandal96 View Post
    post the whole javascript code for this function, also the id's defined to the html separetly by you
    Are you for real?


    Quote Originally Posted by akhandal96 View Post
    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:
    Code:
    onclick="dialString+=KeyPressValue;"
    Here is an example:
    Code:
    <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.

  • Users who have thanked blaze4218 for this post:

    akhandal96 (11-14-2011)

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    like this?

    Code:
    <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>
    Last edited by xelawho; 10-07-2011 at 05:45 PM. Reason: remove dodgy bit of code ;)

  • #4
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts
    Or like that:

    Code:
    <!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.
    Last edited by ironboy; 10-07-2011 at 09:58 PM.

  • #5
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    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

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    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?

  • #7
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    group hug!

  • #8
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    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 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

  • #9
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts
    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 - but I can ensure you the script above would not make me any money.

  • #10
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    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.

  • #11
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    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-...correctly.html

  • #12
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Or even like this for better
    visual effect ...

    Code:
    <!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>
    Last edited by DaveyErwin; 10-07-2011 at 10:43 PM.

  • #13
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts
    @blaze4218:
    God, it's hard being a poor spluttering Swede - of course I meant "assure". I can see that clearly now.

  • #14
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    @ironboy, your too funny, and a good sport!

  • #15
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,145
    Thanks
    38
    Thanked 505 Times in 499 Posts

    Lightbulb

    Quote Originally Posted by DaveyErwin View Post
    Or even like this for better
    visual effect ...

    Code:
    <!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:
    Code:
    // change
    // 	btns(btns.length-1).onclick=function(){alert(numbers);numbers=""}
    // to
    	btns[btns.length-1].onclick=function(){alert(numbers);numbers=""}

  • Users who have thanked jmrker for this post:

    DaveyErwin (10-08-2011)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •