Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow Should be really simple, but I'm new!

    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!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,133
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    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.)
    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.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,133
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    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>
    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.

  • #4
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Excellent stuff, Cheers! Damn, even my HTML was wrong

  • #5
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm this method doesn't seem to work in IE9 so I'm guessing it wouldn't in any IE, any suggestions? :S

    Cheers!

  • #6
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts
    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...
    Last edited by ironboy; 10-05-2011 at 11:19 PM.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,133
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    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.
    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.


  •  

    Tags for this Thread

    Posting Permissions

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