Javascript Change picture on the go

问题

Updating the Question:
@Mouser, thank you for this answer. though I'm sure the code is fine, it actually doesn't do anything. I believe it is because I run the script right after the elements in the body section. So, the list is created, and then the code is run and the source of the listimgx changes, but how can I make it actually show the named src? At its current state, page loads, text items change, but the pictures don't. I tried adding a class to ul and adding a listview refresh at the end of my script, but it didn't work.

Original Question:
Ok, the following code is supposed to check a 2-dimensional-array value, and if it contains the string "fi", then it should change the i.th listimg.source to write.png.
In other words, the current img source is set to "mcicon.jpg". let's say, urlArray[4][1] contains "fi"; now I want listimg4.src to be "write.png". I'm trying a for loop for this, but it didn't work so far.I tried both these without success:
imgname.concat(i).src="write.png"
currentname.src="write.png"

//some items in my list:
<li>
<a href="#" onclick="datasent(1);"><img src="mcicon.png" id="listimg0" alt="Gummy Bears" /><span 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>
<li>
<a href="#gummies" onclick="datasent(3);"><img src="mcicon.png" id="listimg2" alt="Gummy Bears" />
<h1 id="testname2"> Test Name 2 </h1>
<p id="testexp2">Test Explanation 2</p>
</a>
</li>

//and my javascript code:
<script>
var urlArray = [[1, "mc", "To Be Present", "Choose the correct answer.", 10, 0, 0],[2, "fi", "To Be Present", "Fill in the blanks using To Be Present.", 10, 0, 0]]

//those work:
document.getElementById("testname1").innerHTML = urlArray[1][2];
document.getElementById("testexp1").innerHTML = urlArray[1][3];

//this one does not work! the icon doesn't change!

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.
  }
}
}

回答1:

This code will not work. You're requesting the src property on a string. That isn't an image element. document.getElementById("testname1") maybe. So set the src of that element to currentname.

urlArray = [[0, "si"], [1, "wi"], [2, "fi"]];

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.
      }
    }
}

<img src="" id="listimg2" />

来源：https://stackoverflow.com/questions/27680607/javascript-change-picture-on-the-go

标签

javascript

concat