Jump to content
Larry Ullman's Book Forums

Chpt 9 Pursue #4


Recommended Posts

Hi,

I am trying to create a page - page A, with a link that opens a popup window - page B. Page B will start with a number of 0 being displayed. On page A will be an additional link that will add 5 to the value in page B. The code I have created in an effort to accomplish this is below. The function on page B is not being called and I am not sure what I am doing wrong. Any help would be greatly appreciated. Thanks!

 

Page A contains the following Javascript:

window.onload = function(){
var link = document.getElementById('link').onclick = createPopup;
}

function createPopup(){
var popup = window.open('ex_new_alert.html','PopUp','height=100,width=100');
return false;
document.getElementById('addLink').onclick = function(){
popup.window.addToNumber(5);
return false;
}
};

Page B contains the following Javascript:

var number = 0;
var calc = document.getElementById('calc');
calc.textContent = number;
function addToNumber(num){
number += num;
calc.textContent = number;
console.log(number);
};

Link to comment
Share on other sites

Paul, I tried running your code from IE8 at work, and it didn't work for me either.

 

There are several issues I noted with your code, but instead of trying to troubleshoot each one individually, I rewrote the two scripts so that they do work. It's very possible that my HTML was different from your HTML, which might be why it didn't work for me, but all the same, here's my full code for both pages:

 

a.html

<!DOCTYPE html>
<html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>window.open test A</title>

 </head>

 <body>

   <a href="#" id="link">Click Me</a>

   <a href="#" id="addLink">Add 5</a>

   <script>

  window.onload = function () {

    var link = document.getElementById('link');

    link.onclick = createPopup;

  };

  function createPopup() {

    var popup = window.open('b.html', 'PopUp', 'height=100,width=100');

    document.getElementById('addLink').onclick = function () {

	  popup.window.addToNumber(5);

	  return false;

    };

    return false;

  }

   </script>

 </body>

</html>

 

b.html

<!DOCTYPE html>
<html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>window.open test B</title>

 </head>

 <body>

   <div id="calc"></div>

   <script>

  var number = 0;

  var calc = document.getElementById('calc');

  calc.innerHTML = number;

  function addToNumber(num) {

    number += num;

    calc.innerHTML = number;

  }

   </script>

 </body>

</html>

Link to comment
Share on other sites

That code should do what you intended. Hopefully you can change it little by little to suit your needs.

 

While I'm at it, I noticed several things with the code you posted (and any one of these things (or a combination thereof) might be the reason why your code isn't working). I hope you don't mind if I comment on those things (because I'm going to):

 

1) The anonymous function reference assigned to the window.onload event handler needs a semicolon after the closing brace.

 

2) I didn't test it out, so I'm not sure, but I don't think the following is a valid assignment:

var link = document.getElementById('link').onclick = createPopup;

 

Basically, I don't think you can assign a DOM object to a variable and assign a function reference to an event handler for that DOM object in one line. I could be wrong though, in which case, I apologize. Even if it's possible though, there might be some cross-browser issues, so it might be best to avoid such constructions.

 

3) Because you defined the createPopup function by starting with the function keyword, you don't need a semicolon after the closing brace.

 

4) I think the first return false statement in the createPopup function is the main problem. Whenever you return a value from a function, any code below that return statement in the function is not executed. As such, the onclick event handler for the "Add 5" link probably isn't even being set up. You should move the first return false statement to the very end of the function.

 

5) A minor knitpick (i.e., a code consistency thing), but for the first onclick event handler, you return false within the function that's called, but for the second onclick event handler (the one in the createPopup function), you return false within the anonymous function that's called instead of within the actual function that's called. This is minor, but I noticed it.

 

6) You need a semicolon after the closing brace of the anonymous function that's called for the onclick event handler within the createPopup function.

 

7) For the second script, I've never used the textContent property (so I honestly don't know how it works). Is there any benefit over simply using the innerHTML property instead (which seems to have more universal support)?

 

8) The console object is not supported in all browsers (so if you are testing your scripts in IE, you might be getting an error).

 

As a general point, when you're writing/testing scripts, I'd use either Chrome's built-in JS debugger, or I'd use the FireBug extension to catch all these things.

Does all that answer your question?

 

Note: I had to make two posts instead of one because my workplace limits the amount of text I can write per post. Ugghh!

  • Upvote 2
Link to comment
Share on other sites

Thanks so much Hartley. That was extremely helpful. The reason I just used the textContent property is because I am just testing this particular exercise in Firefox. This problem was just a learning exercise for me. I'm a bit confused about when and when not to use semicolons. I've probably already read this in the book but are there any rules you recommend I memorize. Thanks again!

Link to comment
Share on other sites

In the simplest terms, all statements require a semicolon and language constructs do not require a semicolon.

A statement essentially equates to a single operation, so whenever you perform an operation, you need a semicolon.

The following are some examples of statements, which all require semicolons:

 

// Variable declarations
var a;

// Variable assignments
a = 5;

// Note that because functions are just another data type in JS, when you assign a function
// to a variable, you still need a semicolon. For example:
var add5 = function (a) {

 return a + 5;

};

// Or the above written on one line for perhaps easier comprehension:
var add5 = function (a) { return a + 5; };

// Certain unique statements added in later versions of JS.
// Note that these statements are not supported in all browsers (e.g., earlier versions of IE).
'use strict';

// Ternary operations
var c = (a ===  ? true : false;

// Function calls
add5(10);

// Self-invoking functions
// Because a self-invoking function is simply a function that is both defined and called at the same
// time, you still need a semicolon (because ultimately, it's still a function call).
(function () {

 // Do something.

}());

// Note that the outer set of parentheses is not required, but most people add them as a convention.
// You can also write the above self-invoking function as follows:
function () {

 // Do something.

}();

 

I may have missed a few types of statements, but I think you get the point.

The following are some examples of language constructs, which don't require semicolons:

 

// If statements
// The same applies to if-else, if-elseif-else and switch statements.
if (some-expression) {

 // Do something.

}

// For loops
// The same applies to while loops.
for (var i = 0; i < 10; i++) {

 // Do something.

}

// Try-catch statements
try {

 // Do something.

} catch (e) {

 // Exception occurred. Do something else.

}

// Function definitions
// Note that there is a difference in how function definitions are processed when you define a
// function by starting with the function keyword vs. assigning a function to a variable.
// When the function keyword is used, you don't need a semicolon and also, the function definition
// is automatically moved to the top of your code, meaning that you can execute the function anywhere
// in your code, regardless of where the function is actually defined in your code.
// One thing to be aware of is that this does not applied to nested functions (i.e., a function
// defined within a function).
function add5(a) {

 return a + 5

}

 

Well, I think that's essentially it.

I can't think of anything else.

That answer your questions?

Link to comment
Share on other sites

 Share

×
×
  • Create New...