dynamically add javascript array to img src

Question

I have a javascript array, (not jquery) which I can pull the code needed for src:

var imp = code1 [5];
document.getElementById("prodimg").src=imp;

with HTML of

<img  id="prodimg">

I am trying to set up a system where pressing code2 will bring up the picture for code 2 etc. So the var imp, will change to code2 [5] when code 2 is clicked.

I have it working for some other data on click, but I am having issues writing to get the specific array back into the img tag.

I was thinking along the lines of

  function changeimg(code)

or

 function changeimg (code, array)

function changeimg (code, [5])
{
  imp = code [5]
}

But its not working and Im sure there is an easier way

Js fiddle: http://jsfiddle.net/9aUq8 with some broken function efforts where each button would change the src of the image to its own array

Or http://jsfiddle.net/9aUq8/1/ shows number 1, and the array for B[2] is the number 2. What function would bring up b[2] showing the number 2 instead of 1.

Is the position you want always 5 through multiple arrays? I see you have code1[5] and code2[5] -- these are 2 different arrays at position 5. — tymeJV
– tymeJV, Commented May 30, 2013 at 18:00
Can you create a fiddle to demonstrate? It's really hard to follow what you are saying. — Matt Burland
– Matt Burland, Commented May 30, 2013 at 18:01
yes always the same array position, from multiple arrays. Something along the lines of jsfiddle.net/9aUq8 where each button changes the img — Jon
– Jon, Commented May 30, 2013 at 18:29
jsfiddle.net/9aUq8/1 has my functions that dont work taken out, and maybe a clearer idea. Click B and the pic showing 2 appears — Jon
– Jon, Commented May 30, 2013 at 18:43
That Fiddle results only in a lot of Uncaught ReferenceError: x is not defined messages in the console. — David Thomas
– David Thomas, Commented May 30, 2013 at 18:49

CoursesWeb · Accepted Answer · 2013-05-30 18:23:12Z

1

Try use the window['name_array'][index] like in the function from this example.

<script>
var code1 = [1, 2, 3, 4, 5];
var code2 = ['a', 'b', 'c', 'd'];
function setCodeSrc(code, ix) {
  document.getElementById("prodimg").src = window[code][ix];
}

setCodeSrc('code1', 3);
</script>

Or better, the arrays into an object.

<script>
var codes = {
  'code1': [1, 2, 3, 4, 5],
  'code2': ['a', 'b', 'c', 'd']
};

function setCodeSrc(code, ix) {
  document.getElementById("prodimg").src = codes[code][ix];
}

setCodeSrc('code2', 2);
</script>

edited May 30, 2013 at 18:23

answered May 30, 2013 at 18:17

CoursesWeb

4,2573 gold badges24 silver badges27 bronze badges

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

3 Comments

Jon Over a year ago

thanks - Im slow at JS but it looks interesting. But yes I think the 1st example is what I was looking for. The ix is generic?

CoursesWeb Over a year ago

The ix is not generic, it is just a property /variable name.

Jon Over a year ago

yes sorry, what I meant to say that the ix is not an absolute javascript variable, but a relative one created for the function, and can be called anything?

Jon · Accepted Answer · 2013-05-31 09:03:25Z

0

CoursesWeb is prob a lot better but I did it like this:

    function displayArrayAsImage( array ) {

  var picurl = array[2];

  var html = 'img/';    

    html +=  picurl ;

  html += '.jpg';

  return html;
}

 var getimg = document.getElementById("prodimg");

//inset image at load

   getimg.src = displayArrayAsImage (code1);

//change image on click

function change(code)
{

    getimg.src = displayArrayAsImage (code); 

}

edited May 31, 2013 at 9:03

answered May 31, 2013 at 8:00

Jon

6,5318 gold badges45 silver badges68 bronze badges

Collectives™ on Stack Overflow

dynamically add javascript array to img src

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related