?
Solved

Javascript JS file

Posted on 2014-07-28
10
Medium Priority
?
146 Views
Last Modified: 2014-07-29
Hello expert,

Need to use an external JS file to write to a file.

Made an HTML file and JS file to discover how to connect.

FIles below.

Used the document. write method before but have been told that
the document.write is old fashioned and that document.getElementById with innerHTML
is the way to go. So in the HTML file I did ocument.getElementById with innerHTML
method using cmsDateTime to write to the page.

Then the same method was used to write from the JS file to the HTML file
using cmsDateTime2 to write to the page but no luck.

Thought that perhaps the function writeDate in the JS file needed to be called from within
the HTML page to get the definition of cmsDateTime2 into memory. Tried calling
writerDate two ways but no luck.

Why will the div id in the HTML page not see the definition in the JS file?

Thanks.

Allen in Dallas





+++++++++++HTML file code begin +++++++++++++++++
<html>
<head>
<script src="js_file_external40728.js">
</script>

<style>
body {font-family:"Arial";
}
</style>

</head>
<body onload = writeDate()>
</head>
This file uses and external JS file.

<body>

<div>
<script type="text/javascript">
window.onload=function(){
document.getElementById('cmsDateTime').innerHTML = "LHP Hospital Group";
}
</script>
<div id = "cmsDateTime")
<script type="text/javascript">
writeDate()
</script>
<div id = "cmsDateTime2")
</div>
</body>
</html>

+++++++++++HTML file code end +++++++++++++++++

+++++++++++JS file code begin +++++++++++++++++
function writeDate() {
document.getElementById('cmsDateTime2').innerHTML = "LHP Hospital Group Collaboration";
}
+++++++++++JS file code end +++++++++++++++++
0
Comment
Question by:9apit
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
10 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40225266
Question is a bit confusing with your code.
So the writeDate() function is in your js file?

This is your code with the syntax errors corrected

<html>
 <head>
 <script src="js_file_external40728.js">
 </script>

 <style>
 body {font-family:"Arial";
 }
 </style>

 </head>
<body onload = writeDate()>

 This file uses and external JS file.

 <body>

 <div>
 <div id = "cmsDateTime"> </div>
     <script type="text/javascript">
 window.onload=function(){
 document.getElementById('cmsDateTime').innerHTML = "LHP Hospital Group";
 }
 </script>
 </body>

Open in new window

0
 

Author Comment

by:9apit
ID: 40225321
Gary,

The file should write
'LHP Hospital Group' from the element id
'cmsDateTime within the HTML.

There is also a second div
with id 'cmsDateTime2' which is defined
in the JS file 'LHP Hospital Group Collaboration'  

The first string, 'LHP Hospital Group',  writes
the second 'LHP Hospital Group Collaboration'  
does not.

Thanks.

Allen Pitts
LHP Hospital Group
0
 
LVL 58

Expert Comment

by:Gary
ID: 40225339
<html>
 <head>
 <script src="js_file_external40728.js">
 </script>

 <style>
 body {font-family:"Arial";
 }
 </style>

 </head>
 <body onload = writeDate()>

 <body>

 <div id = "cmsDateTime"></div>

 <div id = "cmsDateTime2"></div>

<script>
 window.onload=function(){
 document.getElementById('cmsDateTime').innerHTML = "LHP Hospital Group";
 }
 </script>

 </body>
</html>

Open in new window

0
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 

Author Comment

by:9apit
ID: 40225440
Hello Gary,

Thanks for your help.

I see it writing to
<div id = "cmsDateTime"></div>
but the text for
<div id = "cmsDateTime2"></div>
does not appear.

Sorry if the explanation was not clear.
The writing of 'LHP Hospital Group Collaboration'
is the issue. If the 'cmsDateTime' can be used
in the script to write to the div with id 'cmsDateTime'
why will the script in the external file not write
to the div with id 'cmsDateTime2'.

I think it may be because innerHTML is a DOM object
so using it in an external JS file does not make
the cmsDateTime2 attribute available?

Is that right. If so how to get cmsDateTime2  
into the page HTML?

Thanks

Allen
0
 
LVL 58

Expert Comment

by:Gary
ID: 40225452
<html>
 <head>
 <script src="js_file_external40728.js"></script>
 <style>
 body {font-family:"Arial";
 }
 </style>

 </head> 
 <body>

 <div id = "cmsDateTime"></div>

 <div id = "cmsDateTime2"></div>

<script>
 window.onload=function(){
 document.getElementById('cmsDateTime').innerHTML = "LHP Hospital Group";
 writeDate()

 }
</script>

</body>
</html>

Open in new window

0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 40225705
Sometimes it's easier to "conquer JavaScript" with jQuery.  It's a framework that implements the good parts of JavaScript in a sensible and cross-browser-compatible manner.  This script waits for your click, but it would be just as easy to make the document.ready() load these divs immediately if that is what you want.

Please see: http://iconoun.com/demo/temp_9apit.php

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
    $("#signal").click(function(){
        $("#d1").text('LHP1');
        $("#d2").text('LHP2');
    });
});
</script>

<style type="text/css">
#signal {
    color:red;
    font-family:verdana;
    font-weight:bold;
}
</style>

<title>HTML5 Page in UTF-8 Encoding</title>
</head>
<body>

<p id="signal">Click here to load information into these DIVs:</p>
<div id="d1">This is DIV #1</div>
<div id="d2">This is DIV #2</div>

</body>
</html>

Open in new window

0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 40226641
Thanks for the points.  If you're interested in loading the divs from an external script, jQuery + AJAX is the usual solution.  This article shows the "hello world" exercise.
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/A_10712-The-Hello-World-Exercise-with-jQuery-and-PHP.html
0
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 40227146
Why accept a comment that did not answer your question?
0
 

Author Comment

by:9apit
ID: 40227470
Hello Gary,

Sorry, clicked the wrong button.

Allen
0

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

801 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question