How can I pass an html img element to a javascript included file?

Question

This is a question from a noob in javascript. I tried to find something similar the last two days but I didn't find. I try to pass an html image element to an external javascript file which I include to the rest html code. The javascript fade in and fade out an image. Because I want to use different images everytime, thus I want to have a function in an external javascript file.

What I did so far:

PHP and HTML:

<?php
if ($success){
echo"<link rel='stylesheet' href='js/jquery-ui-1.11.4-smoothness.css'>
                <script src='js/jquery-1.11.3.js'></script>
                <script src='js/jquery-ui-1.11.4.js'></script>

            <img id='tick' src='tick.png'>

            <script type='text/javascript' src='js/success_failure_signs.js'>
            success_failure(tick);
            </script>";

}?>

Javascript file has this code:

function success_failure(tick){
    var x = tick; 
    x.fadeIn();
    x.fadeOut(1000);
    }

The browser's console doesn't give any error. It seems that the function success_failure doesn't get the image. What is wrong on this code and how can I fix it? Thank you in advance!

score 2 · Answer 1 · answered Dec 17 '15 at 14:23

maybe passing the image to the script is the wrong way of thinking here. Most of the time with Javascript for web pages the JS gets the image from the HTML site itself.
You are already including jQuery so look into how to get an element from the page with jQuery.

Quantumplate · Accepted Answer · 2015-12-17T14:51:04.740

2

You haven't defined tick when you make your function call. Try this...

<script type="text/javascript" src="js/success_failure_signs.js">
</script>

<script type="text/javascript">
  var tick = $("#tick"); 
  success_failure(tick);
</script>

EDIT: I've also separated the inclusion of the script and your code to call it into two separate script tags.

edited Dec 17 '15 at 14:51

answered Dec 17 '15 at 14:23

Quantumplate

1,104
8
15

should I also change something in the javascript function? because it also doesn't work. – sotirios Dec 17 '15 at 14:37
Can I have simple quotes instead of double? – sotirios Dec 17 '15 at 14:43
ok, thank you very much for the solution. The problem was also that I should add the variable definition and the function call separately in enclosure. – sotirios Dec 17 '15 at 14:52
Yes single quotes works too. See this... http://stackoverflow.com/questions/2373074/single-vs-double-quotes-vs – Quantumplate Dec 17 '15 at 14:53

How can I pass an html img element to a javascript included file?

2 Answers2