Javascript diaries 4 - code won't work

**noni8** · 04-18-2013 09:04 PM

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">


</script>

</head>

<body>

<script type = "text/javascript">

</script>

</body>
</html>

**Vince616** · 04-19-2013 03:15 AM

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

**JMRKER** · 04-19-2013 10:55 AM

Originally Posted by Vince616

...
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.

**noni8** · 04-19-2013 01:14 PM

thanks SO much! right when you think you looked over your code, errors pop up out of nowhere.

**noni8** · 04-19-2013 01:16 PM

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?

**noni8** · 04-19-2013 01:22 PM

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.

**Vince616** · 04-19-2013 02:14 PM

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

**noni8** · 04-19-2013 02:43 PM

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.

**JMRKER** · 04-19-2013 03:30 PM

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: Javascript diaries 4 - code won't work

Thread Tools

Display

Javascript diaries 4 - code won't work

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions