JavaScript - Calling Functions From Later In The Function

Hi,

I have an embarrassingly similar problem to the last time I was here. I have a google map that generates links and checkboxes from an xml file and puts them in a sidebar. The links open infowindows and the checkboxes show or hide lines on the map.

Which all works ok. But (like last time) I have another function that puts arrowheads along those lines to indicate directionality.

The code which turns the lines off and on looks like this:
Code:

function togglePoly(poly_num) {
        if (document.getElementById('poly'+poly_num)) {
           if (document.getElementById('poly'+poly_num).checked) {
              gpolys[poly_num].show();
			} else {
              gpolys[poly_num].hide();
			}

        }

      }

and the sidebar creation code is like this:
Code:

sidebar_html += '<input type="checkbox" id="poly'+poly_num+'" checked="checked" onclick="togglePoly('+poly_num+');">' + label + '<br />';

so I was thinking that I could just call the functions that put the arrows on the lines like this, to show/hide them along with their respective lines:
Code:

 function togglePoly(poly_num,category) {
        if (document.getElementById('poly'+poly_num)) {
           if (document.getElementById('poly'+poly_num+category).checked) {
              gpolys[poly_num].show();
			show(category);
           } else {
              gpolys[poly_num].hide();
			 hide(category);
           }
        }
      }

and change the sidebar code to this:
Code:

sidebar_html += '<input type="checkbox" id="poly'+poly_num+'" checked="checked" onclick="togglePoly('+poly_num+','+category+');">' + label + '<br />';

and all would be well.

But all is not well - I get an error saying that my category is not defined in the sidebar_html line.

If you want to see it in action, here's without trying to toggle the arrows on and off:
http://xelawho.com/map/busroutes2.htm

and here's the version with the category undefined error:
http://xelawho.com/map/busroutes3.htm

can anybody help me out here?

thanks in advance.

i have a script that will let you know what the date is.. as well as a countdown to thanksgiving.. it is called tday.js
Code:

function showDate() {
   thisDate = new Date();
   var thisWDay=thisDate.getDay();
   var thisDay=thisDate.getDate();
   var thisMonth=thisDate.getMonth();
   var thisYear=thisDate.getFullYear();
   var mName = new Array("January", "February", "March", "April", "May", 
       "June", "July", "August", "September", "October","November", "December");
   var wdName = new Array("Sunday", "Monday", "Tuesday", "Wednesday",
       "Thursday", "Friday", "Saturday");
   return wdName[thisWDay]+", "+mName[thisMonth]+" "+thisDay+", "+thisYear;
}


function calcThanksgiving(year) {
   var delta = year - 1900;
   var tday = delta % 12;
   tday = (tday + Math.floor(tday/4) + Math.floor(delta/12)) % 7;
   return (tday == 0)? 28 : (29 - tday);
}

function daysToThanksgiving() {
   var thisDate = new Date();
   var year = thisDate.getFullYear();
   var tday = calcThanksgiving(year);
   var tdate = new Date("November "+tday+", "+year);
   if (thisDate > tdate) {
      year++;
      tday = calcThanksgiving(year);
      tdate = new Date("November "+tday+", "+year);
   }

   return Math.floor((tdate-thisDate)/(1000*60*60*24));
}

so now i have to call upon this script to print "today is ..the date.. . <br> there are ..days... till thanksgiving


im kind of new of calling on javascript files but i came up with

Code:

<SCRIPT LANGUAGE="JavaScript" SRC="tday.js">
</SCRIPT><script type="text/javascript">
document.write('Today is: '+showDate()+'. There are '+daysToThansgiving()+' days until Thanksgiving.');
</script>

and it doesnt seem to be working.

I am currently designing a table as such
Code:

___________________________
|       TABLE                           |
|                                          |     FRAME A
|___________________________|
|     last row clicked                 |    FRAME B
|___________________________|

the top frame is a table and the bottom frame contains the last row clicked called through onclick.

question: if frame B is a php file with a javascript object, how do i call the javascript object's function to print the data?

here is what i have so far

index.html //this is the source code for the site
Code:

<html>
<frameset rows = "60%, 40%">
<frame src = "table_driver.php" name = "A" id = "FRAME1">
<frame src = "bottom_row.php" name = "B" id = "FRAME2">
</frameset>
</html>

printJSTable() //prints the table shown in frame A
Code:

 function printJSTable()
      {
        echo '<script src = "java_script.js"></script>';
        echo '<script src="sorttable.js"></script>';
        echo '<table class = "sortable" id = "myTable" border = "1">';
        echo '<thead id = "header"><tr>';
        foreach($this->columns as $header => $order)
        {
                echo '<th>';
                echo $header;
                echo '</th>';
        }
        echo '</tr></thead><tbody>';
        $counter = 0;
        for($i = 0; $i < $this->numRows; $i++)
        {
                //IMPORTANT changeRow(this) is JS call
                echo '<tr onclick = "changeRow(this)" onmouseover = "mouseOver(this)" onmouseout = "mouseOut(this)">';
                foreach($this->data[$i] as $key => $value)
                {
                        echo '<td>';
                        if($value!="")
                                echo $value;
                        else
                        {
                                echo '';
                        }
                        $counter++;
                        echo '</td>';

                }
                echo '</tr>';
        }
        echo '</tbody></table>';
        echo '<form><input id = "'.$this->numRows.'"type = "button" value = "add row" onclick = "addRow(id)"></form>';
      }

and this is changeRow(this) which is supposed to create the table in frame b
Code:

//populates headersArr and rowArr correctly
parent.B.obj = new TableData(headersArr, rowArr);
parent.B.obj.printTable();

here are the function definitions for TableData
Code:

function TableData(headers, row)
{
    this.headerArr = headers;
    this.rowArr = row;
}

TableData.prorotype.printTable = function()
{
    for(i=0; i<this.headerArr.length; i++)
        {
            document.write('<tr><th>');
            document.write(this.headerArr[i]);
            document.write('</th><td>');
            document.write(this.rowArr[i]);
            document.write('</td></tr>');
        }
}

and then, finally, this is the php file for the bottom frame
Code:

<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
<script type = "text/javascript" src="java_script.js"></script>
</head>

<body>
<script>
obj = new TableData;
</script>
</body>
</html>

what i want to do is populate the variable obj from ^ (bottom_row.php) and then use the print function to print it out. right now it is populating correclt,y but i cant get it to print. The error console says that

Value undefined (result of expression parent.B.obj.printTable) is not object.

??

sry for all the code! just didnt want to leave anything out

thanks!

Hi, i was wondering if there was a way to call a nested javascript function directly, from outside of the function its nested in?

for example, if i have the following functions:
Code:

<script type="text/javascript">
var test = function(){
	var testInner = function(){
		alert('testInner');
	}
}
</script>

can i then call the 'testInner' function directly from an onclick action something like this:

Code:

<a href="#" onclick="test.testInner()">TEST JS</a><br /><br />

That code is obviously not working for me, but is there something similar to what ive shown here that will work?

Thanks in advanced

so, I can pass a value from a select list to another function which then decides which function to call, but I want to cut out the middleman, and make the values the function calls, and call them directly on the onchange... I imagine something like this:

Code:

<select id="select" onchange="this.value">
	<option selected value="function1()">Funtion 1</option>
        <option value="function2()">Function 2</option>            
	<option value="function3()">Function 3</option>
	</select>

is it possible?

I still can't understand very well when to use and when NOT to use parenthesis when calling/using methods and functions.

Case 1: Where I commented "// No parenthesis.", could someone explain why not. And at the end, where the commen reads "// Parenthesis. ?
Code:

/* This function will be used as a method inside the objects. */
function getPayment() {
    thePayment = 250;
    thePayment += (this.seats == 'leather') ? 100 : 50;
    thePayment += (this.engine == 'V-8') ? 150 : 75;
    thePayment += (this.radio == 'CD Player') ? 30 : 10;
    return thePayment;
}

/* Object Constructor (prototype of the object). */
function car(seats, engine, radio) {
    this.seats = seats;
    this.engine = engine;
    this.radio = radio;
    this.payments = getPayment; // No parenthesis.
}

/* Creates an instance called 'my_car' out of the 'car' object. */
var my_car = new car('cloth', 'V-6', 'Tape Deck');

/* Object Initializer - automatically instantiates the object. */
var carObj = {
     seats:  'leather',
     engine: 'V-8',
     radio:  'CD Player',
     payments: getPayment // No parenthesis. No comma after last item.
}

// Firebug...
console.log(my_car.payments()); // Parenthesis.
console.log(carObj.payments()); // Parenthesis.

/* vim:set foldmethod=indent: */

Case 2: Please look at the comments.

Code:

window.onload = initAll; // Why no () here?

function initAll() {
    window.doStuff(); // Why () here?
}

function doStuff() {

    var msg_text = 'I love you so much!';
    var msg_link = window.document.getElementById('msg_link');
    console.log(msg_link);
    var msg_box = window.document.getElementById('msg_box');

    msg_link.onmouseover = function() {
        //msg_box.value = msg_text;
        msg_box.setAttribute('value', 'May the force be with you!');
    };

    msg_link.onmouseout = function() {
        /* This works in ie. */
        //msg_box.value = '';

        /* Doesn't work in ie7 (and probably not in ie6 either).
         * Perhaps the code above is reasonable. */
        msg_box.removeAttribute('value');
    }
}
/* vim:set foldmethod=indent: */

<p>
<script type="text/javascript">// <![CDATA[
var metrics = {
"mm" : 1,
"cm" : 10,
"m" : 1000,
"inch" : 25.4,
"foot" : 304.8
};
function convert(num, dec){
var val = document.getElementById("fromVal").value;
if(isNaN(val)){
return
}


function roundNumber(num, dec) {
var result = Math.round( Math.round( num * Math.pow( 10, dec + 1 ) ) / Math.pow( 10, 1 ) ) / Math.pow(10,dec);
return result;
}

document.getElementById("toVal").value = val *
metrics[document.getElementById("fromSystem").value]/
metrics[document.getElementById("toSystem").value];
}
var interval = null;
function watchChanges(){
interval == null ? setInterval("convert()", 500) :
clearInterval(interval);
}
// ]]></script>
</p>
<table>
<tbody>
<tr>
<td><input id="fromVal" style="width: 100px;" onfocus="watchChanges()" onblur="watchChanges()" type="text" /><select id="fromSystem" onchange="convert()"> <option value="mm">millimeters</option> <option selected="selected" value="cm">centimeters</option> <option value="m">meters</option> <option value="foot">feet</option> <option value="inch">inches</option> </select></td>
</tr>
<tr>
<td colspan="1" align="center">=</td>
</tr>
<tr>
<td><input id="toVal" style="width: 100px;" type="text" disabled="disabled" /><select id="toSystem" onchange="convert()"> <option value="mm">millimeters</option> <option value="cm">centimeters</option> <option value="m">meters</option> <option selected="selected" value="foot">feet</option> <option value="inch">inches</option> </select></td>

How can I call a PHP Function inside a Javascript Function? This is what I have so far, but I don't think I'm doing it the right way.
Any suggestions?

PHP Code:
<?php
function phpQuery(){

     $query = mysql_query("INSERT INTO mytable VALUES('','name','email')");

}
?>
<script type="text/javascript">
function delayQueries()
{
  timeoutID = window.setTimeout(doQueries, 2000);
}

function doQueries()
{
  var runQuery = "<?php phpQuery(); ?>";    
}
</script>

Hi,

I am working on a google map where you can show lines on the map by checking checkboxes. Lines are displayed according to their category attribute in the xml file. The function that picks up the checkbox click is like this:
Code:

 function boxclick(box,category) {
        if (box.checked) {
          show(category);
        } else {
          hide(category);
        }

Another part of the code assigns that category attribute to arrows, so that when a line of "x" category is displayed, the relevant arrows are displayed along with it, to indicate directionality.

I also have a select list which displays the lines by looping through their array and using selectedIndex in a function called handleSelected2. But I can't get the arrows to display along with the lines from the select box. After trying many, many things, I figure that all I need to do is to call the show(category) function from inside the handleSelected2 function and it should all come together. So I came up with this:

Code:

function handleSelected2(opt,category) {     
  for (var h = 0; h <gpolylines.length; h++) {
		  gpolylines[h].hide();
        }
         h = opt.selectedIndex - 1; 
        if (h > -1) {
          gpolylines[h].show();
		 }
		 for (var v=0; v<pts.length; v++) { 
		 show(category); 
		   }
}

which gets me lines, but no arrows. You can see it sort of working he
http://www.xelawho.com/map/zonesarrowstest.htm

I figure I've got to be close, because if I just tell it to show all the arrows (without going through the category filter) like this:

Code:

function handleSelected2(opt,category) {     
  for (var h = 0; h <gpolylines.length; h++) {
		  gpolylines[h].hide();
        }
        var h = opt.selectedIndex - 1; 
        if (h > -1) {
          gpolylines[h].show();
		  }
       for (var i=0; i<pts.length; i++) {
		 pts[i].show();
        }
    }

then all the arrows show up, as you can see he http://www.xelawho.com/map/zonesarrowstest2.htm

I'm not getting any error messages and I've tried pretty much everything I can think of... I've been tweaking this for days and it's driving me crazy. Does anybody else have any ideas?

Thanks in advance.

I've done a lot of work only to be stuck here at this problem. someone please help:
Using the today variable as the parameter value, call the showDateTime() function and store the value returned by the function in the thisDay field of the eventform Web form.

what exactly is this asking me to do? would you provide examples please? thanks in advance!@

I am in a class that is right now creating an online quiz that is also displays time. The part I am running into a wall right now is

"Call the runClock() function every second, storing the ID of this timed-interval command in the clockId variable."

I am unsure how to call it every second. Also, how would I call a function within a function? Here is my code so far:

<link href="quiz.css" rel="stylesheet" type="text/css" />
<script src="functions.js" type="text/javascript"></script>
<script type="text/javascript">
var seconds = 0
var clockID =
function runClock() {
clockID = seconds++;
document.getElementById("quizclock").value = seconds;
}
function startClock() {
return showQuiz;
}
</script>
</head>

I need to create a form button named Create Resume. When clicked this button should call a function that generates a new Web page displaying a resume based on the user input. I am supposed to use the document.write() method to populate a newly generated Web page with all of the XHTML elements, formatting and variable values needed to produce the desired output in Web (.htm) format.

I was hoping to get some guidance on how to accomplish this final step on my project. Any help would be greatly appreciated!

KM





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Web 115 Final Project</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

</head>

<body>
<script type="text/javascript" src="projectjs.js">
</script>
<hr align="center" width="60%" />
</br>
<script type="text/javascript">
document.write("<span style=\"font-family:garamond; text-align:center;font-size:

30px;\"> <p><b>Build Your Resume</b></p><\/span>");
</script>

<form name="resume" method="get">
<p><input type="text" value="Enter your full name" size="50"/>
</p><p>
<input type="text" value="Enter your address" size="150"/>
</p><p>
<input type="text" value="Enter your phone number" size="50"/>
</p><p>
<input type="text" value="Enter your e-mail address" size="50"/>
</p>
<script language = "Javascript">
function echeck(str) {

var at="@"
var dot="."
var lat=str.indexOf(at)
var lstr=str.length
var ldot=str.indexOf(dot)
if (str.indexOf(at)==-1){
alert("Invalid E-mail ID")
return false
}

if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)

==lstr){
alert("Invalid E-mail ID")
return false
}

if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)

==lstr){
alert("Invalid E-mail ID")
return false
}

if (str.indexOf(at,(lat+1))!=-1){
alert("Invalid E-mail ID")
return false
}

if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
alert("Invalid E-mail ID")
return false
}

if (str.indexOf(dot,(lat+2))==-1){
alert("Invalid E-mail ID")
return false
}

if (str.indexOf(" ")!=-1){
alert("Invalid E-mail ID")
return false
}

return true
}

function ValidateForm(){
var emailID=document.resume

if ((emailID.value==null)||(emailID.value=="")){
alert("Please Enter your Email ID")
emailID.focus()
return false
}
if (echeck(emailID.value)==false){
emailID.value=""
emailID.focus()
return false
}
return true
}
</script>
<p>
<textarea id="tarea" cols="75" rows="4">Enter your personal information

</textarea></p><p>
<textarea id="tarea" cols="75" rows="4">Enter your career objectives

</textarea></p><p>
<textarea id="tarea" cols="75" rows="4">Enter your educational background

</textarea></p><p>
<input type="text" value="Most recent employment beginning and ending dates"

size="50"/></p><p>
<textarea id="tarea" cols="75" rows="4">Most recent employment experience</textarea>

</p><p>
<input type="text" value="Employment beginning and ending dates" size="50"/></p><p>
<textarea id="tarea" cols="75" rows="4">Additional Employment

Experience</textarea></p><p>
<input type="text" value="Employment beginning and ending dates" size="50"/></p><p>
<textarea id="tarea" cols="75" rows="4">Additional Employment

Experience</textarea></p><p>
<input type="text" value="Employment beginning and ending dates" size="50"/></p><p>
<textarea id="tarea" cols="75" rows="4">Additional Employment

Experience</textarea></p><p>
<textarea id="tarea" cols="75" rows="4">Character References</textarea></p><p>
<textarea id="tarea" cols="75" rows="4">Business References</textarea></p></br>
<input type="button" name="push_button" value="Create Resume"/>
</form>

</body>
</html>

I would like to call a function within a function. Is this even possible??
When I do this I get "undefined"

Here's my code:
Code:

<html>
<head>
<script type="text/javascript">
function product(a,b){
   total = a*b;
   display(total);
}

function display(num){
   return num;
}
</script>
</head>

<body>
<h1>This text I do NOT want to be erased.</h1>

<a href="http://google.com" target="_blank">Total: </a>
<script type="text/javascript">
product(3,4);
document.write(display());
</script>

</body>
</html>

I know you can just return in the first function, "product()" but I would like to do something else in my second function "display()" then return a value.

thanks

New here. The issue is this:

I am trying to display two clocks. I used the javascript clock generator (http://rainbow.arch.scriptmania.com/...generator.html) to create both clocks. However, the same code to place in the html was given to call each clock;

<script language="JavaScript">displayTime();</script>.

Below is the code for both clocks. What can be changed so that each clock displays on my website?

Clock 1:


function timeSource(){
x=new Date(timeNow().getUTCFullYear(),timeNow().getUTCMonth(),timeNow().getUTCDate(),timeNow().getUTCHours (),timeNow().getUTCMinutes(),timeNow().getUTCSeconds());
x.setTime(x.getTime()+10800000);
return x;
}
function timeNow(){
return new Date();
}
function leadingZero(x){
return (x>9)?x:'0'+x;
}
function twelveHour(x){
if(x==0){
x=12;
}
return (x>12)?x-=12:x;
}
function displayOnTime(){
if(fr==0){
fr=1;
document.write('<font size=1 face=verdana><b><span id="tP">'+eval(outputTime)+'</span></b></font>');
}
document.getElementById('tP').innerHTML=eval(outputTime);
setTimeout('displayOnTime()',1000);
}
function amPMsymbol(x){
return (x>11)?'pm':'am';
}
function fixYear4(x){
return (x<500)?x+1900:x;
}
var dayNames=new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
var monthNames=new Array('January','February','March','April','May','June','July','August','September','October','Novem ber','December');
var fr=0;
var outputTime1="dayNames[timeSource().getDay()]+' '+timeSource().getDate()+' '+monthNames[timeSource().getMonth()]+' '+fixYear4(timeSource().getYear())+' '+':'+':'+' '+twelveHour(timeSource().getHours())+':'+leadingZero(timeSource().getMinutes())+':'+leadingZero(tim eSource().getSeconds())+' '+amPMsymbol(timeSource().getHours())";


Clock 2:


function timeSource(){
x=new Date(timeNow().getUTCFullYear(),timeNow().getUTCMonth(),timeNow().getUTCDate(),timeNow().getUTCHours (),timeNow().getUTCMinutes(),timeNow().getUTCSeconds());
x.setTime(x.getTime()+daylightSaving()-18000000);
return x;
}
function timeNow(){
return new Date();
}
function daylightSaving(){
return ((timeNow().getTime()>findDay(0,2,3,2).getTime())&&(timeNow().getTime()<findDay(0,10,3,1).getTime()) )?3600000:0;
}
function findDay(d,m,h,p){
var week=(p<0)?7*(p+1):7*(p-1),nm=(p<0)?m+1:m,x=new Date(timeNow().getUTCFullYear(),nm,1,h,0,0),dOff=0;
if(p<0){
x.setTime(x.getTime()-86400000);
}
if(x.getDay()!=d){
dOff=(x.getDay()<d)?(d-x.getDay()):0-(x.getDay()-d);
if(p<0&&dOff>0){
week-=7;
}
if(p>0&&dOff<0){
week+=7;
}
x.setTime(x.getTime()+((dOff+week)*86400000));
}
return x;
}
function leadingZero(x){
return (x>9)?x:'0'+x;
}
function twelveHour(x){
if(x==0){
x=12;
}
return (x>12)?x-=12:x;
}
function displayTime(){
if(fr==0){
fr=1;
document.write('<font size=2 face=Arial><b><span id="tP">'+eval(outputTime)+'</span></b></font>');
}
document.getElementById('tP').innerHTML=eval(outputTime);
setTimeout('displayTime()',1000);
}
function amPMsymbol(x){
return (x>11)?'pm':'am';
}
function fixYear4(x){
return (x<500)?x+1900:x;
}
var dayNames=new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
var monthNames=new Array('January','February','March','April','May','June','July','August','September','October','Novem ber','December');
var fr=0;
var outputTime="dayNames[timeSource().getDay()]+' '+timeSource().getDate()+' '+monthNames[timeSource().getMonth()]+' '+fixYear4(timeSource().getYear())+' '+':'+':'+' '+twelveHour(timeSource().getHours())+':'+leadingZero(timeSource().getMinutes())+':'+leadingZero(tim eSource().getSeconds())+' '+amPMsymbol(timeSource().getHours())";

hi

i have a sliding vertical menu in my page in the left side and in the right side i have a text say for eg: Home.

So when i click on home, i need the left side vertical menu to slide and open and the home in the left side should get highlighted.

How do i do this in javascript ????

Pls help!!!!