0

I have 3 link images, which you're supposed to click, and then a caption will appear underneath, and also on a clickable button, which will take you to that site. All 3 go through the same button and caption, so it has to change based on which image you clicked. I am only allowed to use ONE function to make that work. So I did that, but it still doesn't do anything when I click the buttons.

I am NOT allowed to mess much with the structure - I must get ONE function of some kind to make all 3 of those linked images put out the 3 variables (caption, button, and target) depending on which image is clicked. I already made it work with 3 different functions, but now I have to do it with one.

I AM A TOTAL NEWBIE, so please show me how to do it as plainly as possible. thank you!

<html>
<head>
<script>
var caption1='My Blog';
var button1='My Blog';
var target1= 'http://iamunicorngirl.livejournal.com';

var caption2='Nail Polish Line';
var button2='Nail Polish Line';
var target2='http://mustachelacquer.etsy.com';

var caption3='Failblog';
var button3='Failblog';
var target3='http://failblog.org';

function ButtonFunction(caption1, button1, target3);
{
document.getElementById('linkbox').innerHTML=caption1;
document.getElementById('mybutton').innerHTML=button1;
document.getElementById('linkbox').setAttribute('onclick','window.location.href="'+ target3 +'";');
}
</script>
</head>

<table>
<table align="center">
<tr>
<td><img type="picture" src="blog.png" onclick="ButtonFunction(caption1, button1, target1)";></td>
<td><img type="picture" src="nailpolish.png" onclick="ButtonFunction(caption2, button2, target2)";></td>
<td><img type="picture" src="failblog.png" onclick="ButtonFunction(caption3, button3, target3)";></td>
</tr>
<tr>
<td><h3 type="text" id="linkbox"></h3></td>
</tr>
<tr>
<td><button id="mybutton"></button></td>
</tr>
</table>
</html>
Uni
  • 1,371
  • 4
  • 11
  • 9
  • Is the code you provided what you've already attempted? Or is it what you were provided as the basis for this (presumable) homework question? I'm curious what you've already tried to do to solve your problem, which is what Stack Overflow expects of its questions. – Derek Oct 03 '13 at 19:33

1 Answers1

0

I notice two problems with the code you provided:

1) You have a misplaced semicolon in your ButtonFunction. It should be like this:

function ButtonFunction(caption1, button1, target3) { ...

2) Your semicolons are outside your onclick definitions. They should be like this:

... onclick="ButtonFunction(caption1, button1, target1);"> ...

Working Example

Note that it is helpful to use a developer console in your browser. Javascript errors become easily identifiable. For example: SyntaxError: Expected token '{'

showdev
  • 28,454
  • 37
  • 55
  • 73
  • OMG IT WORKS!!! THank you sooooooo much. I had no idea the ; mattered, they just taught us to put them after every line – Uni Oct 03 '13 at 19:20
  • Cool, glad it works. Semicolons can/should be used after every *statement*, but not necessarily after every line. More information can be found here: [Semicolons Recommended?](http://stackoverflow.com/questions/444080/do-you-recommend-using-semicolons-after-every-statement-in-javascript) and [Guide to Semicolons in JS](http://www.codecademy.com/blog/78-your-guide-to-semicolons-in-javascript). – showdev Oct 03 '13 at 19:26