Log in

View Full Version : 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?



<!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:



<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
<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>
Steve Sea
04-06-2007, 06:52 PM
No believe it or not, my (dream list) is 3 drop down menus
with thousands, hundreds, and I think the tens & units as the last.
so by selecting say.

2000 500 45

it will return

two thousand five hundred forty five

have I been sniffing too many red wine bottle, or is it all possible,
I know there will be some laborious coding but I can handle that.

and many thanks chaps for your time.
less then a hour ago I was scratching my head, and now I've two working scrips, thanks again:)

Steve C.
Steve Sea
04-10-2007, 06:30 PM
Hi all
Stuck again I've played with all the buttons and still nothing :confused: , (No male female jokes please :D ) anyway can any one help me stop the text over text, I've tried radio buttons and a few other things still no joy, I have also positioned the 1st 3 within the <div> tag.

regards

Steve c.

here's the 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>
Thousands
<form>
<input name="Thousands" type="radio" onclick="showNumber('une mille');" value="1000" ><br>
<input name="Thousands" type="radio" onclick="showNumber('deux milles');" value="2000"><br>
<input name="Thousands" type="radio" onclick="showNumber('trois milles');" value="3000"><br>
<input name="Thousands" type="button" onclick="showNumber('quatre milles');" value="4000"><br>
<input name="Thousands" type="button" onclick="showNumber('cinq milles');" value="5000"><br>
<input name="Thousands" type="button" onclick="showNumber('six milles');" value="6000"><br>
<input name="Thousands" type="button" onclick="showNumber('sept milles');" value="7000"><br>
<input name="Thousands" type="button" onclick="showNumber('huit milles');" value="8000"><br>
<input name="Thousands" type="button" onclick="showNumber('neuf milles');" value="9000"><br>
<input name="Thousands" type="button" onclick="showNumber('dix milles');" value="10,000"><br>



<div id="une mille" style="display: none; position:absolute; left:15px; top:300px; width:170px; height:40px;"><h2>une mille</h2></div>
<div id="deux milles" style="display: none; position:absolute; left:15px; top:300px; width:170px; height:40px;"><h2>deux milles</h2></div>
<div id="trois milles" style="display: none; position:absolute; left:15px; top:300px; width:170px; height:40px;"><h2>trois milles</h2></div>
<div id="quatre milles" style="display: none;"><h2>quatre milles</h2></div>
<div id="cinq milles" style="display: none;"><h2>cinq milles</h2></div>
<div id="six milles" style="display: none;"><h2>six milles</h2></div>
<div id="sept milles" style="display: none;"><h2>sept milles</h2></div>
<div id="huit milles" style="display: none;"><h2>huit milles</h2></div>
<div id="neuf milles" style="display: none;"><h2>neuf milles</h2></div>
<div id="dix milles" style="display: none;"><h2>dix milles</h2></div>




</form>



</body>
</html>