Easy way to replace parts of code with other parts of code

I'm making a small website for a game called League of Legends that compares matchup data (what champion counters a certain champs counters) and prints out results on a webpage. I'm using this html code that shows character portraits with onClick() to make them start a function when clicked

<a href="#" onClick="tristanaweak()"><img src="portraits/Aatrox_Square_0.png" width="25px" height="25px" alt=random></img>
<a href="#" onClick="tristanaweak()"><img src="portraits/Ahri_Square_0.png" width="25px" height="25px" alt=random></img>
<a href="#" onClick="tristanaweak()"><img src="portraits/Akali_Square_0.png" width="25px" height="25px" alt=random></img>
<a href="#" onClick="tristanaweak()"><img src="portraits/Alistar_Square_0.png" width="25px" height="25px" alt=random></img>
<a href="#" onClick="tristanaweak()"><img src="portraits/Amumu_Square_0.png" width="25px" height="25px" alt=random></img>

I've already manually put in the picture filenames (which was very tedious), but I still have to rename the onclick() values (tristanaweak) with the champion name (aatroxweak, ahriweak, etc.). I was thinking of doing this with a loop that edits text, but I don't know how I would go about doing this.

I'm fairly new to using Javascript, is there an easy way to rename all the onClick="tristanaweak()"'s in the html code to the first part of the png filenames in the same lines?

Solution

You should chose a different approach in my opinion. In javascript, you can also generate HTML dynamically using javascript function document.createElement(string tagName).

So, one of two possible soulitions would be creating a new images with new event for every champion:

HTML:

<div id="hero_images">
</div>

JS:

var champions = [
   {
     name: "Veigar", 
     callback: function() {/**Whatever you wanna do in onclick**/}
   },
   {
     name: "Vladimir", 
     callback: function() {/**Whatever you wanna do in onclick**/}
   },
   {
     name: "Morgana", 
     callback: function() {/**Whatever you wanna do in onclick**/}
   }
];
//Now lets make an image for every champion:
var container = document.getElementById("hero_images"); //We'll put images in div I've defined in HTML above
for(var i=0; i<champions.length; i++) {  //Loop through "champions" which is an array
  var a = document.createElement("a");
  a.href="#";
  a.onclick = champions[i].callback;  //Assign function from champion list to this <a>
  //Also create the image
  var img = document.createElement("img");
  img.src = "portraits/"+champions[i].name+"_Square_0.png"; //I suppose image always have champion name in beginning
  img.alt = champions[i].name; //Alternative text for no-image users
  //Append image to link:
  a.appendChild(img);
  //Append <a> to <div>
  contained.appendChild(a);
}

But in fact, you should use a global function for champions and you should have champion stats defined in the champions I've used. Under such circumstances:

var champions = [
   {
     name: "Veigar", 
     stats: {
        inteligence: 666,
        strength: 1,
        /*..whatever you use...**/
     }
   }
];

for(/**imagine the prewious code here**/) {
   ...
   a.onclick=(function(i) {
     ShowHeroStatsOrWhatever(champions[i]);
   })(i); 
   ...
}
function  ShowHeroStatsOrWhatever(champion) {
    alert("Champions intelligence is "+champion.stats.inteligence);
}