Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Displaying text via a button

  1. #1
    Join Date
    Apr 2007
    Location
    Southwest France
    Posts
    29
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Displaying text via a button

    Hi all
    As you can see I'm new to the site, I joined because it looks nice and friendly here, anyway I have a little problem with some code,
    can any one help, I will try to explain as best as I can.

    I am trying to make a sort of form, to help kids write numbers so what is needed is the button or drop down menu to have the "10" on it but when press or selected to display the word "ten" on screen I haven't see any other forms or HTML code like this so is it possible client side as I don't want to go down the server script road.

    regards

    Steve c

  2. #2
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    Something like this?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
     <head>
    <script type="text/javascript">
    
    function showNumber(number) {
    
    obj = document.getElementById(number);
    
      if (obj.style.display == "none") {
        obj.style.display = '';
      }
    
      else {
        obj.style.display = 'none';
      }
    }
    </script>
     </head>
    <body>
    
    <form>
    <input type="button" onclick="showNumber('ten');" value="10">
    </form>
    
    <div id="ten" style="display: none;">
    <h2>Ten</h2>
    </div>
    </body>
    </html>
    Hope this helps.
    Last edited by thetestingsite; 04-06-2007 at 06:30 PM.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

  3. #3
    Join Date
    Feb 2007
    Posts
    601
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I think he wants it to show on the screen ... (your script won't in IE) -

    <html>
    <body>
    <input type="button" onclick="show(10, 'numbera')" value="10"> - <span id="numbera" style="visibility: hidden;">Ten</span>
    <script>
    function show(num,id) {
    document.getElementById(id).style.visibility="visible"
    }
    </script>
    </body>
    </html>

    Hope this helps (if you need more numbers just say so)...
    Last edited by pcbrainbuster; 04-06-2007 at 06:36 PM.

  4. #4
    Join Date
    Apr 2007
    Location
    Southwest France
    Posts
    29
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I tested this in on IE 7 and it didn't display the word "ten" any Ideas ?

    Many thanks

    Steve c.

    once I have a working code I can pull it to bits to see how it works.

  5. #5
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    The script I posted above should work in IE, and FF now that I have editted the code. I had a typo in the document.getElementById() part.

    Edit: Sorry, Cross posted. Anyways; should work now after re-copying and pasting the code in my above post.

    Hope this helps.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

  6. #6
    Join Date
    Feb 2007
    Posts
    601
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Same I had a typo in the argument num's value in the button, mine should work now as well... Also had 10c changed to Ten...

  7. #7
    Join Date
    Apr 2007
    Location
    Southwest France
    Posts
    29
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Late again, you guys are a lot quicker on the keyboard then me,
    and yes you were right I wanted to display the number in words on the browser screen.

    Steve C.

  8. #8
    Join Date
    Feb 2007
    Posts
    601
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Are you sure you only want Ten to be displayed ???

  9. #9
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    Well, with both of our scripts you can add more than one number to display.

    For mine, simply use this in between the form tags:

    Code:
    <input type="button" value="7" onclick="showNumber('seven');">
    
    <div id="seven"><h2>Seven</h2></div>

    Change the part in red to the number value you want the button to show, change the parts in blue to the text of the number you want to display.

    Hope this helps.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

  10. #10
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Code:
    <script type="text/javascript">
    var units = ["", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine"],
      specunits = { "ten-one" : "eleven", "ten-two" : "twelve", "ten-three" : "thirteen", "ten-four" : "fourteen", "ten-five" : "fifteen", "ten-six" : "sixteen", "ten-seven" : "seventeen", "ten-eight" : "eighteen", "ten-nine" : "nineteen" },
      tens = ["", "ten", "twenty", "thirty", "forty", "fifty", "sixty", "seventy", "eighty", "ninety"];
    
    function numToEnglish(num) {
      num = parseInt(num);
      if(isNaN(num) || num < -999 || num > 999)
        return "Invalid input.";
    
      var sign = "";
      if(num < 0) {
        sign = "minus "
        num *= -1;
      }
    
      var nunits = num &#37; 10,
        ntens = parseInt(Math.round((num % 100) / 10)),
        nhunds = parseInt(Math.round(num / 100)),
        tandu,
        thunds;
    
      if(tens[ntens] && units[nunits])
        tandu = tens[ntens] + "-" + units[nunits];
      else
        tandu = tens[ntens] + units[nunits];
    
      if(specunits[tandu])
        tandu = specunits[tandu];
    
      thunds = units[nhunds];
      if(thunds)
        thunds += " hundred ";
      if(units[nhunds])
        if(tens[ntens] || units[nunits])
          thunds += "and ";
        else
          tandu = "";
    
      return sign + thunds + tandu;
    }
    </script>
    <form action="" onsubmit="this.elements['english'].value = numToEnglish(this.elements['num'].value);">
      <label>
        Number between -999 and 999: <input type="text" name="num">
      </label>
      <input type="submit" value="To English">
      <input type="text" name="english">
    </form>
    Last edited by Twey; 04-06-2007 at 07:01 PM.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

Bookmarks

Posting Permissions

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