How to update new images within DIV?

I am new to HTML and Javascript. Please someone can help me with the following. The following code will display 579 as normal after the page is loaded. But, I need it to display a different number without refreshing the whole page. For example, if something triggers like mouse click, then 795 (images) will display. What could I do to make new number in images to display on the same position as previously. Thank you very much.

` DisplayNumImg(5,7,9);

<a href="#" onclick="DisplayNumImgChanged(7,9,5)" /a>



#child2-3
{
 position: absolute;
 width: 165px;
 height: 15px;
 left: 5px;
 top: 40px;
}

.thumb_child1
{
  float:right;
  margin:0px;
}


function DisplayNumImg( a, b, c)
{

  var s;

  if ( a == 5 ) {
     s = '<img class="thumb_child1" src="./images/5_blu.png"> ';
     document.write( s );
  }

  if ( a == 7 ) {
     s = '<img class="thumb_child1" src="./images/7_blu.png"> ';
     document.write( s );
  }

  if ( a == 9) {
     s = '<img class="thumb_child1" src="./images/9_blu.png"> ';
     document.write( s );
  }
}

function DisplayNumImgChanged( a,b,c )
{
   // please help me with code here or something that you think it would work. Thanks.
}

`

Answers


Ok, first off: I strongly suggest that you should learn and use jQuery (and then, once you have, if you still want to improve as a developer, go back and learn how it works by learning about the Javascript code that powers it). It will make things much easier for you.

In this case, it sounds like what you are trying to do is update the src attribute on your image element. With jQuery this can be done as follows:

$('.thumb_child1').attr('src', './images/9_blu.png');

In raw JS, that would be something like:

var thumbs = document.getElementsByTagAndClassName(null, 'thumb_child1');
for (var i = 0; i < thumbs.length; i++) {
    thumbs[i].src = './images/9_blu.png';
}

(Although the above code is untested, so post back if you have issues.)


  1. don't use document.write (ever!)
  2. put css in a style tag
  3. put javascript in a script tag
  4. only post actual code on stackoverflow (that code would never work)

If I understood what you were up to, something like this could work:

function DisplayNumImgChanged( a,b,c )
{
   var valueArray = [a, b, c];
   var imgElems = document.getElementsByClassName('thumb_child1');
   for (var i = 0 ; i < imgElems.length ; i++) {
       imgElems[i].src = './images/' +valueArray[i]+ '_blu.png';
   }
}

Need Your Help

Set background image for font color?

html css

Say I have the following code: