Two exact same Javascript code page, yet one works - one doesn't

james909 · July 23, 2013

I have the following Javascript code on a HTML page, it is a popup window to the main parent window.

When the user selects a picture in this child window it changes the variable and a picture 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 in the lines commented on are 1s.

<!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 can't understand why the page that changes pic 1 works but this page that changes pic 2 doesn't, when they have the exact same code?

Edited July 23, 2013 by james909

james909 · July 24, 2013

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

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'm really scratching my head wondering why this is happened?

Sign In

Two exact same Javascript code page, yet one works - one doesn't

Recommended Posts

james909

Link to comment

Share on other sites

james909

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information