CODEWITHSUNDEEP
javascriptjqueryhtml
User2468
User2468

Reputation: 99

How to link javascript function to html input

*New question following suggestions:

HTML head contains:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="myscript.js"></script>

Here is my HTML:

<div id="sidebar">
    <table id="table1">
        <tr>
            <th>Table</th>
        </tr>
        <tr>
            <td>
                <a href="javascript:;" rel="img1">Link1</a>
            </td>
            <td>
                <a a href="javascript:;" rel="img2">Link2</a>
            </td>            
        </tr>
    </table>
</div>

<div id="box">
    <img src="http://icons.iconarchive.com/icons/artdesigner/emoticons-2/256/cant-believe-it-icon.png" id="img1" class="images"/>
    <img src="http://icons.iconarchive.com/icons/artdesigner/emoticons-2/256/too-much-icon.png" id="img2" class="images"/>
</div>

And my CSS:

#sidebar {
    display: inline-block;
    height: auto;
    width: auto;
    font-family: Garamond;
    font-size: large;
}

#table1 {
    border: 1px solid black;
    text-align: center;
}

#table1 th {
    border: 1px solid black;
}

#table1 td {
    border: 1px solid black;
}

#box {
    position: relative;
    height: 200px;
    width: 1200px;
}

.images {
    display:none;
    position: absolute;
    top: 0px;
    left: 0px;
}

And my Javascript:

$('a').click(function(){
    imgid = $(this).attr('rel');
    $('a').removeClass('active');
    $(this).addClass('active');

    $('img').hide();    
    $('#'+imgid).fadeIn('slow');
});

This should mean that when the Link1 is clicked, the first image appears and when the Link 2 is clicked, the second image appears and the first goes away (the images are on top of each other in CSS). However, when either of the two are clicked, nothing happens. Any suggestions why this may be the case?

Upvotes: 1

Views: 4001

Answers (2)

Alaeddine
Alaeddine

Reputation: 1677

You have two choices:

Save your javascript code into a file with .js extension code.js then import it to your html file using <script type="text/javascript" src="code.js"></script>

Or you can put your code directly in your HTML file in the Head part like this :

  <head>
    <script>
    // Your Javascript Code
    </script>
  </head>

And don't forget to import jQuery

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Upvotes: 1

Ali Zahr
Ali Zahr

Reputation: 64

Of course at first you have to include your javascript file in the html, best practice include it in the header:

<script type="text/javascript" src="/destination/to/file.js"> </script>

then in the 

<a href="#" onclick="FunctionToCall();">Link</a>

and make sure your javascript file is modified to get the element by its id to run the function properly.

Upvotes: 0

Related Questions