通过文本框更改多个图像（javascript）

我对javascripting很陌生，也许答案很简单，但我不明白。我想通过文本框中的输入更改图像。因此，图片路径的一部分应替换为文本框中键入的值。它适用于一张图片和一个文本框，但我希望至少有10个文本框，单个值应分配给10张图片中的一张。此外，到目前为止，我必须重新加载页面才能再次更改图片。这种情况不应该发生。有人能给我一个提示或解决方案吗？我在谷歌上搜索了很多，但我不知道应该搜索什么。微小的来源在下面

谢谢

javascript部分：

window.onload = function()
{
document.getElementById( 'inpPG' ).onchange = keyUpPG;
}

function keyUpPG()
{
var img = document.getElementById( 'pg' );
img.src = img.src.replace( /chris_paul.png/ , this.value + '.png');
}

window.onload = function()
{
document.getElementById( 'inpSG' ).onchange = keyUpSG;
}

function keyUpSG()
{
var img = document.getElementById( 'sg' );
img.src = img.src.replace( /eric_gordon.png/ , this.value + '.png');
}

等等

身体部分：

<center>
PF <input type="text" id="inpPF"> C <input type="text" id="inpC"> SF <input type="text" id="inpSF"><br>

<img id="pf" src="http://i.cdn.turner.com/nba/nba/.element/img/2.0/sect/statscube/players/large/kevin_love.png">
<img id="c" src="http://i.cdn.turner.com/nba/nba/.element/img/2.0/sect/statscube/players/large/joakim_noah.png">
<img id="sf" src="http://i.cdn.turner.com/nba/nba/.element/img/2.0/sect/statscube/players/large/harrison_barnes.png">

<br>PG <input type="text" id="inpPG"> SG <input type="text" id="inpSG"><br>
<img id="pg" src="http://i.cdn.turner.com/nba/nba/.element/img/2.0/sect/statscube/players/large/chris_paul.png">
<img id="sg" src="http://i.cdn.turner.com/nba/nba/.element/img/2.0/sect/statscube/players/large/eric_gordon.png">

<br><input type="button" value="Reload Page" onClick="window.location.href=window.location.href">
</center>

PF C SF


PG SG

像这样简单地使用jquery

 $('#inpPG').on('change', function() {
          $('#pg').attr('src','http://i.cdn.turner.com/nba/nba/.element/img/2.0/sect/statscube/players/large/'+this.value);
        });

    $('#inpSG').on('change', function() {
              $('#sg').attr('src','http://i.cdn.turner.com/nba/nba/.element/img/2.0/sect/statscube/players/large/'+this.value);
            });

在PG或SG文本框中输入-->kevin_love.png进行测试