I have the following Javascript code on 2 HTML pages, they are popup windows from the main parent window.

When the user selects a picture in one of the child windows it changes a variable and an image in the parent window.

I have pages changepic1.html and changepic2.html.

This is the code for changepic2.html which doesn't work, yet changepic1.html which works is exactly the except the 2s in the lines commented on are 1s.

Code:
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>Select Image</title>

<link rel="stylesheet"  href="select.css">

<script>
(function() {
   'use strict';

function removeWindow(){

if(window.name=='wxyz'){
  var pic=document.getElementById('thumbs').getElementsByTagName('img');
  var c=pic.length;

while(--c>-1) {
pic[c].onclick=function(){
 
   var nsrc=this.src;

   var nme=nme.replace(nme.substr(nme.lastIndexOf('.')),'');

   window.opener.document.getElementById('change2input').value=nme;  // the Id is ('change1input') in other page 
   window.opener.document.getElementById('c2-pic').src=nsrc;   // the Id is ('c1-pic') in other page
   window.opener.document.getElementById('c2-pic').style.display ='inline';  // the Id is ('c1-pic') in other page
   if (nme=='Clear') { window.opener.document.getElementById('c2-pic').style.display ='none'; } // the Id is ('c1-pic') in other page
   window.close();
  } 
 }

  var txt=document.createTextNode('close this window'); 
  var cl=document.createElement('h2');
      cl.setAttribute('id','wincl');
      cl.appendChild(txt);

  document.body.appendChild(cl);

document.getElementById('wincl').onclick=function(){ window.close(); }
  }
 }
   window.addEventListener?
   window.addEventListener('load',removeWindow,false):
   window.attachEvent('onload',removeWindow);
         function closeme()
    {  
        window.close();
    }
    window.onblur=closeme;
})();
</script>

</head>
<body>

<ul id="thumbs">

 <li><img src="redGround-1.png" ></li>
 <li><img src="yellowFlat-2.png" ></li>
 <li><img src="bigCurve-3.png" ></li>
 <li><img src="smallCurve-4.png" ></li>
 
</body>
change1input and change2input are hidden input fields in the parent window and both exist.

c1-pic and c2-pic are the div ids of the image to change in the parent window.

This window doesn't close when the image is clicked, but the other page works fine.

I have narrowed it down and the code stops at this line:

Code:
window.opener.document.getElementById('c2-pic').src=nsrc;
If I change the image element ID to ('c1-pic') it changes the first image, but will not change the image with the ID ('c2-pic') with this code.

Both images with ID c1-pic and c2-pic image exist.

I am really puzzled why the page that changes pic 1 works but this page that changes pic 2 doesn't, when they have the exact same code?