How do you combine JavaScript code and html code together?

Question

I am newer to Javascript and HTML. I want to check whether an image is loaded or not. I found this code on StackOverflow,but I don't know how to combine them into a finished piece: Any one can tell me?

The js code:

<script language="JavaScript">
    $("img").one("load", function() {
      // do stuff
    }).each(function() {
      if(this.complete) $(this).load();
    });
    </script>;

The html code:

<div>
  <table width="100%" height="100%" align="center" valign="middle"> 
    <tr>
       <td bgcolor="258cca"><td align="center" valign="middle">
         <p>
            <img src="http://www.freeiconspng.com/uploads/cute-ball-stop-icon-png-1.png">
         </p>
         <p class="STYLE1 STYLE2"></p>
      </td>
    </tr>
    <tr></tr>
  </table>
  <BODY ondragstart="return false;" ondrop="return false;">
 </div>

The CSS:

body {
    background-color: #558CCA;
}
.STYLE1 {
    color: #FFFFFF;font-family: Arial, Helvetica, sans-serif;font-size: 30px;
}
.STYLE2 {
    font-size: 21px;
}

i suggest running through a few online tutorials, or maybe signing up with a learning site like teamtreehouse.com — Cruiser
– Cruiser, Commented Sep 14, 2016 at 13:26

PRogalla · Accepted Answer · 2016-09-14 13:34:31Z

1

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <style type="text/css">
            body {background-color: #558CCA;}
            .STYLE1 {color: #FFFFFF;font-family: Arial, Helvetica, sans-serif;font-size: 30px;}
            .STYLE2 {font-size: 21px}    
        </style>

        <title></title>
        <script type="text/javascript">
            window.onload=function(){
                $("img").on("load", function() {
                }).each(function() {
                if(this.complete) $(this).load();
                });
            }
        </script>
    </head>

    <body>
        <div>
            <table width="100%" height="100%" align="center" valign="middle"> 
                <tbody>
                    <tr>
                        <td bgcolor="258cca"></td><td align="center" valign="middle">
                            <p>
                            <img src="http://www.freeiconspng.com/uploads/cute-ball-stop-icon-png-1.png">
                            </p>
                            <p class="STYLE1 STYLE2"></p>
                        </td>
                    </tr>
                    <tr>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

Fiddle

edited Sep 14, 2016 at 13:34

answered Sep 14, 2016 at 13:29

PRogalla

2363 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

monk master Over a year ago

Thanks everyone,thanks for kindly help,I think this answer is the best one for a newer like me. :)

AntonyMN · Accepted Answer · 2016-09-14 13:25:22Z

1

The code you found is using jquery library so in order for it to work, you must first GET the jquery plugin in your page, just put this code anywhere in your document. For faster loading make it at the bottom of your page. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> Secondly, put your jquery code UNDER this link, otherwise it won't work.

answered Sep 14, 2016 at 13:25

AntonyMN

9051 gold badge16 silver badges28 bronze badges

Comments

Pseudo Sudo · Accepted Answer · 2016-09-14 13:17:29Z

0

This is a basic starter html template

<html>
    <head>
        <script language="Javascript">
            Function here
        </script>
    </head>

    <body>
        Html code here
    </body>
</html>

answered Sep 14, 2016 at 13:17

Pseudo Sudo

1,4123 gold badges17 silver badges34 bronze badges

Comments

Remzes · Accepted Answer · 2016-09-14 13:35:17Z

0

Put the <script>...</script> block to the end of your page, before the </body> tag. If you have your scripts at the top of the page, it can cause mistakes sometimes.

answered Sep 14, 2016 at 13:35

Remzes

2691 gold badge4 silver badges19 bronze badges

Comments

Kurenai Kunai · Accepted Answer · 2016-09-20 05:41:56Z

A few errors in your code :

There should be no semicolon after the script tag
jquery has "on" method, its misspelled "one" here

When in one file the basic html page syntax goes as:

<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
 /* css styles go here*/
 body {
    background-color: #558CCA;
 }
.STYLE1 {
    color: #FFFFFF;font-family: Arial, Helvetica, sans-serif;font-size: 30px;
 }
.STYLE2 {
    font-size: 21px;
}
</style>
<script type="text/javascript">
    // javascript/jquery code goes here
     $("img").on("load", function() {
      // do stuff
    }).each(function() {
      if(this.complete) $(this).load();
    });
</script>
</head>
<BODY ondragstart="return false;" ondrop="return false;">
<div>
  <table width="100%" height="100%" align="center" valign="middle"> 
    <tr>
       <td bgcolor="258cca"><td align="center" valign="middle">
         <p>
            <img src="http://findicons.com/files/icons/1072/face_avatars/300/a05.png">
         </p>
         <p class="STYLE1 STYLE2"></p>
      </td>
    </tr>
    <tr></tr>
  </table>
 </div>
 </body>
</html>

Collectives™ on Stack Overflow

How do you combine JavaScript code and html code together?

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related