Javascript Placement Issue

Question

Ok. Here is what I do to change the image src of some list items in my body script. as default, these list items load a different image. WHat I try to do is to check for the text in my urlArray, and then set the image src to somethingelse.png. I think the folllowing loop which runs at the end of the body section changes the source, but it does not change the actual picture. How can I make sure that it changes the picture as well?

for (var i=0; i<urlArray.length; i++) {
var imgname = "listimg";
if (urlArray[i][1]==="fi"){
  var currentname = imgname.concat(i);
  if(document.getElementById(currentname) ) //check if element exists
  {
     document.getElementById(currentname).src= "write.png";
     //for debugging; delete from production code.
     console.log(document.getElementById(currentname).src); //should write "write.png" to console.
  }
}
}

Thank you for your answers and comments, forgive me for being a rookie..

Also some li items from my html:

<li>
<a href="#" onclick="datasent(1);"><img src="mcicon.png" id="listimg0" alt="Gummy Bears" /><span id="test1score" class="ui-li-count">12</span>
<h2 id="testname0"> Test Name 0</h2>
<p id="testexp0">Test Explanation 0</p>
</a>
</li>

<li>
<a href="#dog" onclick="datasent(2);"><img src="mcicon.png" id="listimg1" alt "Min Pin" />
<h1 id="testname1">Test Name 1</h1>
<p id="testexp1">Test Explanation 1</p>
</a> 
</li>

http://stackoverflow.com/questions/27680607/javascript-change-picture-on-the-go, I also linked it in the text "as discussed here" part. — Ugur, Jan 05 '15 at 14:04
Please provide a description of the intended aim, not just a link to another of your questions. it is not clear exactly what you wish to do. — iCollect.it Ltd, Jan 05 '15 at 14:09

score 1 · Accepted Answer · answered Jan 04 '15 at 22:36

1

Looking at the samples you provide, the code only works at the end of the body element as it references elements loaded before the code executes. If you move the code to the top of the page it runs before the elements on the page exist as it runs immediately after the script is loaded.

In order to reference elements that have not loaded yet, in jQuery, you need to wrap any code in a DOM ready handler. In plain JavaScript you might have used the window.load event, but the jQuery one is smarter and runs as soon as the DOM elements have all loaded.

e.g.

$(document).ready(function(){
    // Your code here
});

of the shorter version:

$(function(){
    // Your code here
});

answered Jan 04 '15 at 22:36

iCollect.it Ltd

92,391
25
181
202

Thanks, but will that work for the image src code?, What I mean is, when document is ready, will it go back and detect the change of the image src, and reload new image? I couldn't make it happen so far... – Ugur Jan 05 '15 at 14:05
@Ugur: It would really help if you provided your description of the intended use *in your own question* and not just a link to another question. If you need to listen for image loaded events, that needs to be added to each image in DOM ready and when the total reaches the number of images, you are there. There are plugins to do that for you. – iCollect.it Ltd Jan 05 '15 at 14:07

Javascript Placement Issue

1 Answers1