Choosing A Random Name...(Event Listeners)

**LayneMitch** · 08-18-2008, 10:05 PM

Hello.

Having issues with yet another piece of code....(By the way, I've created 20 something problems for myself so I can officially get the hang of this stuff, so I'll be having post for the next few weeks.)

But anyhow, I can't seem to get this working. The code makes since but it doesn't work. I'm referencing a file called 'core.js' there isn't any issue with this file as suggested in an earlier thread. This file is downloaded from the publishers site and it's for the use of 'event listeners'.

Here's the code:

Code:

<html><head><title>Prob.4</title>
<style type="text/css">
#textfield{position:absolute; left:0; top: 15;}
</style>

<script type="text/javascript" src="core.js"></script>
<script type="text/javascript">
var RandomName=
{

  init:function()
    {
      var form=document.getElementsByTagName("form")[0];
      var my_button=form.firstChild;
      Core.addEventListener(my_button,"click", RandomName.chooseNumber);
    },

    chooseNumber:function()
    {
       var ran_Num=parseInt(Math.random()*5);

    RandomName.chooseName(ran_Num);
    },

    chooseName:function(my_num)
    {
      var names=new Array();
       names[0]="Moe";
       names[1]="Larry";
       names[2]="Curly";
       names[3]="James";
       names[4]="John";
      

      var new_window=window.open("","new_window", "height=100, width=100");
      new_window.src=names[my_num];
      var text_div=document.getElementById("textfield");
      var message="I think the class feels that"+names[my_num]+"should answer the question";
      text_div.innerHTML=message;

    }
};

Core.start(RandomName);
</script></head>
<body>
<div id="textfield"></div>
<form>
  <input type="button" value="Choose a name">
</form>
</body>
</html>

**chrishirst** · 08-19-2008, 05:06 AM

And, "but it doesn't work" means what exactly?

Nothing happens?
Error Message?
Browser dies?
etc.

**LayneMitch** · 08-19-2008, 09:48 AM

Quote:

Originally Posted by chrishirst

And, "but it doesn't work" means what exactly?

Nothing happens?
Error Message?
Browser dies?
etc.

Nothing happens. The button shows and nothing happens when you click the button.

I'm starting to think that there could be something wrong with the reference file 'core.js.'

Core.js is a reference file that I'm using for assigning functions to elements by using 'event listeners'. 'Event listeners' are supposed to be a better way than using 'event handlers' because w/ 'event listeners' you can assign more than one function for more than one event on just one element. So the coding in this book was based entirely off of the reference file 'core.js'.

I downloaded the file from the publishers site called "Sitepoint"..If you would like, I can PM or email the file to you.

There may be something wrong with the file, because the code above makes sense!

**LayneMitch** · 08-19-2008, 01:08 PM

Quote:

Originally Posted by chrishirst

And, "but it doesn't work" means what exactly?

Nothing happens?
Error Message?
Browser dies?
etc.

Just to give an update...The majority of the problem has been solved. There's nothing wrong with the reference file core.js. The random name appears in a sentence and the pop-up window displays the name.

The issue now is knowing how to clear the name in the pop-up window so I won't have a list of names in the same window each time I hit the button.

Code:

<html><head><title>Prob.4</title>
<style type="text/css">

#textfield{position:absolute; left:10px; top:45px;}

</style>

<script type="text/javascript" src="core.js"></script>
<script type="text/javascript">
var RandomName=
{

  init:function()
    {
      var my_button=document.getElementsByTagName("input")[0];
      Core.addEventListener(my_button,"click", RandomName.chooseNumber);
    },


    chooseNumber: function()
    {
       var ran_Num=parseInt(Math.random()*5);

    RandomName.chooseName(ran_Num);
    },

    chooseName: function(my_num)
    {
      
       var names=new Array();
       names[0]="Moe";
       names[1]="Larry";
       names[2]="Curly";
       names[3]="James";
       names[4]="John"; 
      

      var new_window=window.open("","new_window", "height=200, width=200");
      var new_div=document.createElement("div");
      new_div.setAttribute("id", "newDiv");
      var text=document.createTextNode(names[my_num]);
      new_div.appendChild(text);
      new_window.document.body.appendChild(new_div);
      var text_div=document.getElementById("textfield");
      var message="I think the class feels that"+ names[my_num] +"should answer the question";
      text_div.innerHTML=message;
     
     }

};

Core.start(RandomName);
</script></head>
<body>
<div id="textfield"></div>
<form>
  <input type="button" value="Choose a name">
</form>
</body>
</html>

The code highlighted in blue is what's different from the original code...

**chrishirst** · 08-20-2008, 04:47 AM

Each iteration will append an element to the container new_window.

Check for new_window existing and either destroy it and recreate it. Or use it and update the text in the window.

**LayneMitch** · 08-20-2008, 07:04 PM

Quote:

Originally Posted by chrishirst

Each iteration will append an element to the container new_window.

Check for new_window existing and either destroy it and recreate it. Or use it and update the text in the window.

Appreciate it. Problem has been solved...

They need a way to mark these threads as "resolved".