title: window.opener is null - I'm trying to alert a variable (from the parent window) in my child window - Javascript
body: <p>I'm trying to alert a variable (from the parent window) in the child window. I've looked at solutions on here but they don't work for me and I assume there's something missing or wrong in my code. When I run the code, the error console tells me that the window.opener is null. I've tried parent.window.opener... and that also says the same thing. </p>
  
  <p>parent.htm:</p>
  
  <pre><code>&lt;head&gt;
  &lt;script type="text/javascript"&gt;
              var testtest = "hi";
  
              function reply_click(clicked_id){
  
                  document.getElementById('resultspanel').style.display = 'none';
                  document.getElementById('mainpanel').style.display = 'none';            
  
                  var buttonid = clicked_id;
                  window.buttonid = buttonid; //makes it global
                  alert(buttonid);
  
                  switch(clicked_id) {
                      case "1":
                      case "2":
                      case "3":
                      case "4":
                      case "5":
                      case "6":
                      case "7":
                      case "8":                   
                      case "9":
                      case "10": $('#mainpanel').load("info.htm");document.getElementById('mainpanel').style.display = 'block'; break;    
                  }
  
                      //$('#mydiv').load('newPage.html', {field1: 'value1', ...});
              }
  
  
              &lt;/script&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>child.htm</p>
  
  <pre><code>&lt;head&gt;
  &lt;script type="text/javascript"&gt;
              function test(){
                  //alert(this.parentNode.id);
                  //alert(parent.window.opener.testtest);
                  //window.opener.alert(testtest);
                  var myvar = window.opener.buttonid;
                  alert(myvar);
              }
          &lt;/script&gt;
  &lt;/head&gt;
      &lt;body&gt;      
      &lt;p&gt;INFORMATION&lt;/p&gt;
          &lt;div id = "test" style = "border-style:solid; height:10%; width:10%;" onClick = "test();" &gt;DIV&lt;/div&gt;
      &lt;/body&gt;
  </code></pre>