Not sure if I got it right php, javascript functions

Question

I'M trying to do something like this:

<div id="div1">
 <span onClick="change(1)"><img src="/graphics/pic1.png" /></span>
 <span onClick="change(2)"><img src="/graphics/pic2.png" /></span>
 <span onClick="change(3)"><img src="/graphics/pic3.png" /></span>
 <span onClick="change(4)"><img src="/graphics/pic4.png" /></span> 
  <script language="javascript">
   function change(a) {
     $("#div1").css("background", "url('/graphics/pic"+a+".png')");
   }
  </script>
</div>

But there comes problem... It doesn't work... Did I get it right? I mean the thing with numbers and the "a"? Or I'm totally wrong? This code was just an example...

Is there php to this? Looks to be HTML and JS. I'm removing PHP tag. If you add PHP code add it back — chris85
– chris85, Commented Aug 29, 2015 at 22:25
Could be... There is something really similar in php and I have the same problem with that... And console doesn't write anything but it doesn't work either... — user5008371
– user5008371, Commented Aug 29, 2015 at 22:28
Oo I think i see what you're trying. The css property is url not src. — chris85
– chris85, Commented Aug 29, 2015 at 22:29
Oh right, It's 12:30 am here... I'm little bit tired, but I've got it right in my code... — user5008371
– user5008371, Commented Aug 29, 2015 at 22:30
It is... I made myself sure about that at first... My question is about the variable in function and in code of function... I mean "change(a)" and "a" as normal variable.... — user5008371
– user5008371, Commented Aug 29, 2015 at 22:34

Atif Tariq · Accepted Answer · 2016-03-15 13:30:50Z

1

Please use it like this:

  <script language="javascript">
   function change(a) {
     var url_img = 'url(/graphics/pic' + a + '.png)';
     $("#div1").css("background", url_img);
   }
  </script>

answered Mar 15, 2016 at 13:30

Atif Tariq

2,7701 gold badge31 silver badges35 bronze badges

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

Comments

Frederik Sohnis · Accepted Answer · 2016-03-15 13:27:37Z

To show that your code works I've run a little sample here using colors since I don't have the images. Here you can see that your code does work, although I think it could be written better (if you want to see how I'd do it just let me know). As this is functioning my theory of why it's not working for you is either that

a) Your path to the images is not correct. Make sure that your path is correct and if you need to move out one folder start by using .. before /graphics e.i. ../graphics/pic3.png

b) The second error could be that you haven't actually installed jQuery. Follow this link to see how to install it on your website.

I hope this solves your problem, let me know if it makes sense or if you have any questions.

Working code below:

function change(a) {
     $("#div1").css("background", a);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="div1">
 <span onClick="change('green')"><img src="/graphics/pic1.png" /></span>
 <span onClick="change('yellow')"><img src="/graphics/pic2.png" /></span>
 <span onClick="change('red')"><img src="/graphics/pic3.png" /></span>
 <span onClick="change('brown')"><img src="/graphics/pic4.png" /></span> 
</div>

Collectives™ on Stack Overflow

Not sure if I got it right php, javascript functions

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related