www.webdeveloper.com
Results 1 to 9 of 9

Thread: Javascript diaries 4 - code won't work

  1. #1
    Join Date
    Apr 2013
    Posts
    5

    Javascript diaries 4 - code won't work

    I was posting code to Chrome successfully and then it suddenly stopped working, but I don't know why. It shows the title at the tab (which is Demo) but shows a blank white page.

    Here is my code. I open the file (after savings it) in Chrome.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Demo</title>

    <script type = "text/javascript">
    <!--
    var place = "Delta";
    var type = "blues";
    function music {
    place = "New Orleans";
    type = "jazz"
    document.write("I like the " + place + " " + type);
    }
    //-->

    </script>

    </head>

    <body>

    <script type = "text/javascript">
    <!--
    music();
    document.write(" but I really like " + place + " " type);
    //-->
    </script>

    </body>
    </html>

  2. #2
    Join Date
    Jan 2010
    Posts
    77
    Hi bud

    You have two errors in your bit of code, you have missed out the brackets when you declared your function music.
    The line:
    Code:
    function music{
    Should be:
    Code:
    function music(){
    and you have missed out a plus sign in your document write statement, the line:
    Code:
    document.write("I like the " + place + " "  type);
    Should be:
    Code:
    document.write("I like the " + place + " " + type);
    Just as an aside you should try and find a different way of writing to the screen rather than using document.write() as it is no longer considered a good coding practice

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,357
    Quote Originally Posted by Vince616 View Post
    ...
    Just as an aside you should try and find a different way of writing to the screen rather than using document.write() as it is no longer considered a good coding practice
    And, if executed after the page has been rendered, it will cause the browser to RELOAD your page as if you had never been there before.
    Not good for all practical purposes.

    Better to use .innerHTML on a <div> or other tag element.

  4. #4
    Join Date
    Apr 2013
    Posts
    5
    thanks SO much! right when you think you looked over your code, errors pop up out of nowhere.

  5. #5
    Join Date
    Apr 2013
    Posts
    5
    thanks so much for the tip! that's too bad that the instructions tell you to use it. Codecademy uses console.log to print, do you think this one is okay?

  6. #6
    Join Date
    Apr 2013
    Posts
    5
    actually, I just used .innerHTML (instead of document.write) and also tried console.log, and neither one of those work with this script. I noticed that W3Schools uses document.write, still.

  7. #7
    Join Date
    Jan 2010
    Posts
    77
    Hi bud

    Here is a little example of how to use an elements innerHTML attribute to send data to the screen

    Code:
    <html>
      <head>
        <script type="text/javascript">
         function displayString(str){
           document.getElementById("myDiv").innerHTML=str;
                                    }
        onload= function(){
             displayString("This is the string I want to display")
                          }
        </script>
      </head>
      <body>
        <div id="myDiv"></div>
      </body>
    </html>
    Ok so I have used getElementById to reference the element myDiv and set its innerHTML to the value of str which is a parameter of the function

    And I have called the function on the documents onload event so that it will appear when the page loads

    It is very basic but it should give you and idea of what is going on and how to use this technique

    V

  8. #8
    Join Date
    Apr 2013
    Posts
    5
    thanks Vincent, so that is how you use it. i have not learned how to use the string of code that uses innerHTML yet, but i will keep this in mind as i continue to learn. it's nice to know there are many options to achieve something. thanks so much for your input.

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,357

    Lightbulb

    An expanded example of 'Vince616's code could be...
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript">
    function displayString(str) {
      document.getElementById("myDiv").innerHTML=str;
    }
    onload= function() {
      displayString("This is the string I want to display");
    }
    </script>
    </head>
    <body>
    
    <div id="myDiv" style="background-Color:red; color:white; border:3px dotted orange;"></div>
    <p>
    <button onclick="displayString('Replacement string to display')"> Replacement </button>
    <input type="button" onclick="ErrorMsg()" value="Error Simulation 0" id="errBtn"> 
    <button onclick="displayString('This is the string I want to display')"> Original </button>
    
    <script type="text/javascript">
    var errMessage = 0;
    function ErrorMsg() {
      var msgArr = ['Error found','Error in ajax load','Error in switch() statement','Unknown error'];
      displayString(msgArr[errMessage]);
      errMessage++;  
      if (errMessage > msgArr.length-1) { errMessage = 0; }
      document.getElementById('errBtn').value = 'Error Simulation '+errMessage;
    }
    </script>
    
    </body>
    </html>
    You could modify the ErrorMsg() function and scatter calls to it about where ever you might suspect and error path.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles