Can't Place a Randomly Picked Word Where I Want To
I've put some code together that randomly picks from a series of words and places it in a form box.
The problem is that the word is always left justified in the text box form and it looks ugly on the page. I'd like to place it centered in the box (if it's possible)
Any other suggestions on placing the word at a specific location are welcome. Also, I'd like it so that someone can press the button again and get another word.
<div id="frag_23" style="text-align:left; " > <SCRIPT LANGUAGE="JavaScript"> <!-- // Use the following variable to specify // the number of random words var NumberOfWords = 104
var words = new BuildArray(NumberOfWords)
// Use the following variables to // define your random words: words[1] = "ACCEPTANCE " . . . . words[104] = "WISDOM "
function BuildArray(size){ this.length = size for (var i = 1; i <= size; i++){ this[i] = null} return this }
function PickRandomWord(frm) { // Generate a random number between 1 and NumberOfWords var rnd = Math.floor(Math.random() * NumberOfWords+1)
// Display the word inside the text box frm.WordBox.value = words[rnd] } //--> </SCRIPT>
</div></div>
Last edited by VIPStephan; 08-14-2012 at 08:53 AM..
Reason: added code BB tags
Positioning is done with CSS only. Do you see that the script is executed inside a div there? It has an inline style of “text-align: left”. Change that, and you can also style it anyway you like with that.
Thanks for the responses! Much appreciated. Still not working though. The text still isn't ending up in the center of the text. I'm wondering if there's some rogue code somewhere I'm not finding.
I seriously need to take a couple courses. That's impressive -thanks. I realized that I forgot to include everything when you mentioned it. Here it is; I cleaned it up a little...
<FORM NAME="WordForm">
<INPUT TYPE="TEXT" SIZE="50" text-align:"center" NAME="WordBox"><BR>
<INPUT TYPE=BUTTON onClick="PickRandomWord(document.WordForm)"
VALUE="Click Here to Get a Random Word">
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!--
// Use the following variable to specify
// the number of random words
var NumberOfWords = 104
var words = new BuildArray(NumberOfWords)
// Use the following variables to
// define your random words:
words[1] = "ACCEPTANCE "
.
.
.
words[104] = "WISDOM "
function BuildArray(size){
this.length = size
for (var i = 1; i <= size; i++){
this[i] = null}
return this
}
function PickRandomWord(frm) {
// Generate a random number between 1 and NumberOfWords
var rnd = Math.floor(Math.random() * NumberOfWords+1)
// Display the word inside the text box
frm.WordBox.value = words[rnd]
}
//-->
</SCRIPT>
Is there a simple way to detach the button from the text box? I pieced this code together (quite old code as you noticed) and I always thought that it would be cool to seperate the button from the text box but I think when I tried it I did something similar to what you pointed out - confusing style and tags.
Again, profuse thanks for your help and patience!!
Put the <form> tag as the VERY FIRST THING on the page, directly after the <body> tag.
Put the </form> tag as the LAST THING on the page, just before the </body> (see exception, below).
Now your form element (<input>,<select>,<textare>, etc.) can be ANY PLACE on the page.
Except in the vanishingly rare case of needing two <form>s on one page, this should be your order of coding:
Code:
<html>
<head>
<style type="text/css">
...
</style>
<script type="text/javascript">
// but this may not be best place for many scripts
...
</script>
</head>
<body>
<form ...>
.... page contents ...
</form>
<script type="text/javascript">
// optional placement for js code...
// often the best place for it, actually
...
</script>
</body>
</html>
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Before you post, read our: 
