/    Sign up×
Community /Pin to ProfileBookmark

Javascript diaries 4 – code won’t work

Copy linkTweet thisAlerts:
Apr 19.2013

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>

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@Vince616Apr 19.2013 — 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:
<i>
</i>function music{

Should be:
<i>
</i>function music(){

and you have missed out a plus sign in your document write statement, the line:
<i>
</i>document.write("I like the " + place + " " type);

Should be:
<i>
</i>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
Copy linkTweet thisAlerts:
@JMRKERApr 19.2013 — ...

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[/QUOTE]

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.
Copy linkTweet thisAlerts:
@noni8authorApr 19.2013 — thanks SO much! right when you think you looked over your code, errors pop up out of nowhere. ?
Copy linkTweet thisAlerts:
@noni8authorApr 19.2013 — 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?
Copy linkTweet thisAlerts:
@noni8authorApr 19.2013 — 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.
Copy linkTweet thisAlerts:
@Vince616Apr 19.2013 — Hi bud

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

<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;script type="text/javascript"&gt;
function displayString(str){
document.getElementById("myDiv").innerHTML=str;
}
onload= function(){
displayString("This is the string I want to display")
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="myDiv"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;


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
Copy linkTweet thisAlerts:
@noni8authorApr 19.2013 — 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.
Copy linkTweet thisAlerts:
@JMRKERApr 19.2013 — An expanded example of 'Vince616's code could be...
<i>
</i>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt; Untitled &lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

&lt;script type="text/javascript"&gt;
function displayString(str) {
document.getElementById("myDiv").innerHTML=str;
}
onload= function() {
displayString("This is the string I want to display");
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div id="myDiv" style="background-Color:red; color:white; border:3px dotted orange;"&gt;&lt;/div&gt;
&lt;p&gt;
&lt;button onclick="displayString('Replacement string to display')"&gt; Replacement &lt;/button&gt;
&lt;input type="button" onclick="ErrorMsg()" value="Error Simulation 0" id="errBtn"&gt;
&lt;button onclick="displayString('This is the string I want to display')"&gt; Original &lt;/button&gt;

&lt;script type="text/javascript"&gt;
var errMessage = 0;
function ErrorMsg() {
var msgArr = ['Error found','Error in ajax load','Error in switch() statement','Unknown error'];
displayString(msgArr[errMessage]);
errMessage++; <br/>
if (errMessage &gt; msgArr.length-1) { errMessage = 0; }
document.getElementById('errBtn').value = 'Error Simulation '+errMessage;
}
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;

You could modify the ErrorMsg() function and scatter calls to it about where ever you might suspect and error path.
×

Success!

Help @noni8 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...