Displaying text via a button

**Steve Sea** · 04-06-2007, 05:46 PM

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

**thetestingsite** · 04-06-2007, 06:12 PM

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.

**pcbrainbuster** · 04-06-2007, 06:27 PM

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)...

**Steve Sea** · 04-06-2007, 06:32 PM

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.

**thetestingsite** · 04-06-2007, 06:33 PM

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.

**pcbrainbuster** · 04-06-2007, 06:35 PM

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...

**Steve Sea** · 04-06-2007, 06:35 PM

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.

**pcbrainbuster** · 04-06-2007, 06:37 PM

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

**thetestingsite** · 04-06-2007, 06:44 PM

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.

**Twey** · 04-06-2007, 06:46 PM

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>

Thread: Displaying text via a button

Thread Tools

Search Thread

Displaying text via a button

Bookmarks

Bookmarks

Posting Permissions