Manipulate image source based on variable

Question

I'm trying to get this to work: I've got string variable in a file called test.js. Depending on some values the file is created by a php script and it says something like: var test = 'up' or: var test = 'down'.

Now, I would like display a certain image on my website depending on the value of var test. So in my html code I add this to the header:

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

Then in the body I write:

<script type="text/javascript"> 

    function Test(){
        if (test == 'up'){
            document.getElementById("test").src = '/img/arrows/arrow_up.png';
        }
        else if (test == 'down'){
            document.getElementById("test").src = '/img/arrows/arrow_down.png'; 
        }
        else {
            document.getElementById("test").src = '/img/arrows/arrow_neutral.png';
        }
    }
</script>

And I add in the image with:

<img id="test" src="" class="test">

However, nothing is displayed on the page. Can someone help me out?

Please create a working snippet demonstrating your issue. Are you calling Test anywhere? — gurvinder372
– gurvinder372, Commented Mar 21, 2018 at 8:24
You generally shouldn't dynamically create JS on the fly. It would be more elegant to use HTML data-* attributes, read them in JS, or <script type="application/json"></script>, read and parse from JS. — CertainPerformance
– CertainPerformance, Commented Mar 21, 2018 at 8:26
Well, guess I was still asleep... Thank you guys nonetheless! — Castigliano
– Castigliano, Commented Mar 21, 2018 at 8:30
Personally I'd use css-classes and define your images there, if it just a "background image" which doesn't have to flow with text. Just switch classes from within javascript! — twicejr
– twicejr, Commented Mar 21, 2018 at 9:12

Sebastian Speitel · Accepted Answer · 2018-03-21 08:29:44Z

2

You have to call Test() somewhere, the code below executes it, when the page is fully loaded, so the other .js file has executed(test has been set) and the <img> is on the page.

var test = 'down';

function Test() {
  if (test == 'up') {
    document.getElementById("test").src = '/img/arrows/arrow_up.png';
  } else if (test == 'down') {
    document.getElementById("test").src = '/img/arrows/arrow_down.png';
  } else {
    document.getElementById("test").src = '/img/arrows/arrow_neutral.png';
  }
}

window.onload = function() {
  Test()
};

<img id="test" src="" class="test">

answered Mar 21, 2018 at 8:29

Sebastian Speitel

7,3772 gold badges21 silver badges38 bronze badges

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

Comments

Coskun Ozogul · Accepted Answer · 2018-03-21 08:54:10Z

0

First of all, try to put manually a src to see if the src is correct :

  <img id="test" src="/img/arrows/arrow_up.png" class="test">

If it works, you should call your Test() function somewhere :

 window.onload = function() {
   Test();
 };

To make simplier, you can use JQuery (not obligatory) :

You should add jquery reference to your html page (depending on your scripts folder, the link can change) :

 <script src="~/Scripts/jquery-3.2.1.js"></script>

And you can change your Test() methode on this :

  function Test(){
    debugger;
    if (test == 'up'){
        $("#test").attr("src", '/img/arrows/arrow_up.png');
    }
    else if (test == 'down'){
        $("#test").attr("src", '/img/arrows/arrow_down.png'); 
    }
    else {
        $("#test").attr("src", '/img/arrows/arrow_neutral.png');
    }
  }

Finally, to check if your test parameter is correct, you can put a debugger in order to debug your code in any browser. If you open the developper tools of your browser, (by pressing on F12 on the browser) you can debug your code. The code will hit the debugger keyword.

edited Mar 21, 2018 at 8:54

answered Mar 21, 2018 at 8:37

Coskun Ozogul

2,5172 gold badges25 silver badges37 bronze badges

5 Comments

Sebastian Speitel Over a year ago

why exactly does he need jQuery?

Coskun Ozogul Over a year ago

To make simplier. Not an obligation. I said to make simple. I changed my comment.

Sebastian Speitel Over a year ago

I don't want to start a fight about jQuery here, but there is no reason why anyone would need it in this example

Coskun Ozogul Over a year ago

Ok, so we don't fight. I just said that it is an option, you can use or not. But for this exemple or for another, JQuery is very usefull. I think every frontend developper should know a little about JQuery. You can take this like a little advice for him.

Sebastian Speitel Over a year ago

Yes I absolutly agree, that it can be useful and is a thing good to know, but if you put a jQuery answer to a pure JS question other people who seacrh for the same question and don't want to use jQuery can't use your answer

Collectives™ on Stack Overflow

Manipulate image source based on variable

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related