Should be really simple, but I'm new!

mrlol1 · 10-03-2011, 11:14 PM

Hi Folks,

I've been trying to learn Javascript, I'm fluent with CSS, HTML and not to bad with jQuery and PHP. But I've been trying to learn the core fundamentals of JavaScript.

Basically, I have a friend who has a strange take on the English language, so I wanted to make him a translator, so that you could input one of his misspellings and it would bring up the proper word.

<html>
<head>
<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript">

// Mox spellings

function checkMox ()
{

var bm = document.forms["transMox"]["mox"].value;

if

(bm == "wid") {
document.write("wid = with");

}
else
{
document.write("Please enter a Moxism");
}
};

</script>
</head>
<body>
<header>
<div id="title">
<h1>I drink!</h1>
<h2>Therefor I am...</h2>
</div>
<nav>
<ul>
<li>The history of Moxisms</li>
<li>Examples of Moxisms</li>
<li>The man himself...</li>
</ul>
</nav>
</header>

<h3>Welcome to the Big Mox translator</h3>

<form id="transMox" action="#output" method="post" onsubmit="return checkMox()">
<input type="text" id="mox">Enter a Moxism</input>
<br />
<input type="submit" id="submit" onSubmit="checkMox();">G0!</input>
</form>

<div id="output">

</div>

</body>

</html>

Obviously that's just for one word, so I wondered how to structure more words into an array or something?

Anyway, cheers in advance for the help guys!

Old Pedant · 10-03-2011, 11:26 PM

Once a page is fully loaded in the browser, any use of document.write will *WIPE OUT* the ENTIRE page, even including the JS that did the document.write.

So you can *NEVER* use document.write to respond to any user-initiated event.

In general, if you find you are using document.write, you are probably making a mistake. (There are exceptions, but it's better to not look for them until you learn to avoid them.)

On a separate note, this is incorrect:

Code:

<input type="submit" id="submit" onSubmit="checkMox();">G0!</input>

(1) It's not legal HTML (because putting text between <input> and </input> is meaningless). [Didn't you notice that you created a button that said "Submit query" by doing that???]

(2) There is no such thing as an onsubmit method for <input>. Only <form> has onsubmit.

Other:

You have

Code:

<form id="transMox" action="#output" method="post" onsubmit="return checkMox()">

That's good. But the problem is that your checkMox function doesn't return true or false, so you can't predict what the return there will do.
(Well, yes, as the code exists we can. Because checkMox will wipe out the entire HTML page so the return will never occur.)

Old Pedant · 10-03-2011, 11:34 PM

How about this for a start?

Code:

<html>
<head>
<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript">
// Mox spellings
var moxisms = {
   wid : "with",
   cud : "could",
   shud : "should",
   mox : "maximum" 
   };

function checkMox(form)
{
    var bm = form.mox.value;
    var xlate = moxisms[bm];
    if ( xlate == null ) xlate = "not a known moxism";
    document.getElementById("output").innerHTML = 
           bm + " = " + xlate;
    form.mox.value = "";
    return false;
}
</script>
</head>
<body>
<h3>Welcome to the Big Mox translator</h3>
<form action="#output" onsubmit="return checkMox(this)">
<label>Enter a Moxism: <input type="text" name="mox"></label>
<br />
<input type="submit" value="GO!"/>
</form>
<div id="output"></div>
</body>
</html>

mrlol1 · 10-04-2011, 07:27 AM

Excellent stuff, Cheers! Damn, even my HTML was wrong

mrlol1 · 10-05-2011, 11:08 PM

Hmm this method doesn't seem to work in IE9 so I'm guessing it wouldn't in any IE, any suggestions? :S

Cheers!

ironboy · 10-05-2011, 11:17 PM

Strange - I tested in IE9/Windows 7 - also in "IE7" and "IE8" mode. Works just fine...

EDIT:
Using XXAMP as localhost...
Don't know if there might be any trouble trying to run it directly from the file system...

Old Pedant · 10-06-2011, 01:11 AM

I never run from the file system, even with MSIE. I have IIS installed and run as "http://localhost/...". So could it be related to trying to use with filesytem...hmmm...

I had to remove the reference to "modernizer" script, but other than that it worked just fine from the file system. Have to tell MSIE to "allow unsafe scripting" of course, but that's normal.

MSIE 7, by the by.