Question

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

`

Answer 1

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