www.webdeveloper.com
Results 1 to 5 of 5

Thread: Noob here, having trouble linking an external .js file to my HTML document

  1. #1
    Join Date
    Jun 2014
    Posts
    21

    Question Noob here, having trouble linking an external .js file to my HTML document

    Hi guys, I'm very new to javascript. I started off writing all the code within the HTML doc, this worked fine but quickly the whole thing came really compacted and confusing. So I tried to create a separate .js file. I haven't written much and I'm sorry to say that my noobyness with web development left me debating as to whether I'm even posting to the right section (could be an issue with my HTML).

    My .js file:

    Code:
    <script type="text/javascript">  
    var carObject = {nameOfCar: "Honda", wheelSize: "Large", spaceInCar :"A Lot"};
    
    function showCar() 
    {
    document.getElementById("carPara").innerHTML = carObject.nameOfCar;
    
    
    }
    
    
    </script>
    My .HTML file:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Test Site!</title>
    </head>
    
    <body>
        <div> 
        <section> 
    	    <script type = "text/javascript" src="abc.js"></script>
    	<button type = "button" onclick ="showCar()">Press for Honda!</button>	
    	<p id= "carPara">Show me the car!</p>
    	    
    	</section>
        </div>
    </body>
    
    </html>
    It creates a simple page with a button, that button is supposed to change the text. I have this hunch that the .innerHTML property only works with HTML docs with javascript within them. Probably not. If you have any ideas, thank you!

  2. #2
    Join Date
    Jun 2014
    Posts
    21
    Sorry, the issue is that pressing the button does nothing! Forgot to mention.

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,380

    Lightbulb

    Put your external file at the end of the HTML.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Test Site!</title>
    </head>
    
    <body>
      <div> 
        <section> 
    	<button type = "button" onclick ="showCar()">Press for Honda!</button>	
    	<p id= "carPara">Show me the car!</p>
        </section>
      </div>
    
    <!-- following removed for testing purposes only
      <script type = "text/javascript" src="abc.js"></script>
    -->
    <script type="text/javascript">  
    var carObject = {nameOfCar: "Honda", wheelSize: "Large", spaceInCar :"A Lot"};
    
    function showCar() {
      document.getElementById("carPara").innerHTML = carObject.nameOfCar;
    }
    </script>
    </body>
    </html>

  4. #4
    Join Date
    Nov 2010
    Posts
    1,085
    the issue is most likely that script tags:
    Code:
    <script type="text/javascript">
    </script>
    are html, but are not valid javascript. If you are including a javascript file you are already telling the browser that it is javascript in this line (in the html):
    Code:
    <script type = "text/javascript" src="abc.js"></script>
    so you do not need to tell it again that it is javascript within that file. In fact if you do it will break the code as you have seen

    simple solution: take the script tags out of the js file

  5. #5
    Join Date
    Jun 2014
    Posts
    21
    This solved it, thank you!

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