JavaScript - Accessing Value Passed To Js Problem

I know I have a thread about the sorting function I'm about to post, but this problem doesn't deal with the sorting itself, but rather the fact that a variable is not passing. The code below is the relevant part to an autosuggest feature. The variable that isn't being passed is "firstValidIndex". It is being set appropriately, but when it is used in "sortArray()", its value is 0.

Code:

// here we must check to see if where the string matched was at the beginning of a string inside this.aNames
// firstValidIndex is the first index where the char is at the beginning of a string
var firstValidIndex;
loop1:
for(var j in firstIndices)
{
	loop2:
	for(var k in allOccurrences)
	{
		if(allOccurrences[k] == firstIndices[j])
		{
			firstValidIndex = firstIndices[j];
			aList.push(this.aNames[i]);
			ctr++;
			break loop1;
			break loop2;
		}
	}
}
		
function sortArray(a,b)
{
	var lca = a.toLowerCase();
	var lcb = b.toLowerCase();
	var lco = str.toLowerCase();
	var diff = lca.indexOf(lco,firstValidIndex) - lcb.indexOf(lco,firstValidIndex);
	// some debugging code here
	alert("Comparing "+lca+" with "+ lcb+"\nDiff:"+diff+"\nFirst Valid Index: "+firstValidIndex);
	if ( diff < 0 ) return -1;
	if ( diff > 0 ) return 1;
	return 0;
}
aList.sort(sortArray);

Hi all,

I have a newbie question. I have just started working with javascript and would appreciate some guidance.
I have a webpage and there are products for sale on it(this is not live it is merely being used as practice project). Beside each product is a description a price and an 'add to cart' button.

My cart is simply a div with an id of 'cart' and it has a text box within it. I need the product name to be displayed within the div (this, I have working), I also need to display the product price in the text box once the button(add to cart ) for that particular product has been pressed.
Also when the button for another product is pressed, I want the cost/value for that product to be added to the other value and displayed in the text box in the cart div...

I apologise for rambling on but this is the best way of me explaining my needs....

Here's where i am right now..
The HTML snippet

Code:

<div id ="cart">
    		<p><img src="images/shopping-cart.png"  alt ="cart"/>Your Cart</p>
            
            	<div id="sum"><!--(this is the div where the total goes)-->
					<input type="text" id="total" value="0" /><p>&euro;&nbsp; Your Total &nbsp;<input type="reset" value = "reset" /></p>
                 </div>
    	</div>

<h2 id ="black">Blackcurrent<br /></h2>
        <p>&euro; 12.00 <input type = "submit" value ="add to cart"  onClick = "shoppingCart('Blackcurrent',12)" /></p>

And the javascript:

Code:

alert ("working");

function shoppingCart (itemName,itemValue)
{
/*	var thePrice = Number(itemValue);
	return thePrice;*/
	document.getElementById ("cart").innerHTML += itemName  + "<br/>";
	document.getElementById('total').value = Number(document.getElementById('total').value) + itemValue;
	
		
}

I hope i have posted correctly and am aware that i have only posted a segment of the HTML..

Please let me know if you need any more code or info..

Thanks a lot in advance for any help...

Image of the output:
http://i.imgur.com/jqzhJxb.png


What I'm trying to do, is pass an object by reference so that I can use it in other scripts, and allow the current script to change the object's value when appropriate.



What's happening: It passes correctly, you can see that my var_dump of the object before the function call is 30. After the function call, it becomes 60. Also, it writes "now60" to the document as instructed.

When I call the function the second time, it does nothing. No error, no repeat of writing now60 to the document, etc. And in the last var_dump, which is after the second function call - you can see that the value remained 60. Why?


Thanks for your help!


Code:

PHP Code:
    var quickChallengeTimer = {timer:30}; var quickChallengeQuestion; 
    var quickChallengeAnswer; var quickChallengeResponse;

        function quickChallenge(quickChallengeTimerfunc, quickChallengeQuestion, quickChallengeAnswer) {

            if (typeof quickChallengeResponse == 'undefined') {
                switch (quickChallengeTimerfunc.timer) {

                    case 30:
                        quickChallengeTimerfunc.timer = 60;
                        quickChallengeResponse = 'undefined';
                        document.write("now60");
                        break;

                    case 60:
                        quickChallengeTimerfunc.timer = 120;
                        quickChallengeResponse = 'undefined';
                        document.write("now120");
                        break;

                    default:
                        document.write("Error");
                        break;
                }
            }

            console.dir(quickChallengeTimerfunc.timer);
        }


    var_dump(quickChallengeTimer);
    quickChallenge(quickChallengeTimer);
    
    var_dump(quickChallengeTimer);
    
    quickChallenge(quickChallengeTimer);
    var_dump(quickChallengeTimer); 

Hello, I am trying to use .innerHTML to replace an image with an embedded flash file.

Here is my code...

HTML:
Code:

<a href="#" onclick="funt1(); return false;">do it to it</a><br><br>
<span id="embed"><img src="video%20convert%20zone/zerotime.png"></span>

JavaSscript:
Code:

<script type="text/javascript">
function funt1(){

	document.getElementById('embed').innerHTML='<object width="100" height="40"><param name="movie" value="video%20convert%20zone/video.swf"></param><embed src="video%20convert%20zone/video.swf" width="100" height="40" name="player" id="player" menu="false" loop="false" bgcolor="#000000" wmode="transparent" type="application/x-shockwave-flash"></embed><param name="loop" value="false"></param><param name="menu" value="false"></param><param name="bgcolor" value="#000000"></param><param name="wmode" value="transparent"></param></object>'; return false;
}
</script>

And for some reason in Internet Explorer when I click the "do it to it" link, the image just disappears, and object and embed don't appear. But it works in Firefox.

Any suggestions?

Code:

<html>
<head>
<title>Variable - Examples 1</title>
   <script type="text/javascript">
	function Student(firstName, lastName, email, courseID, titleArray, pointsArray){
		this.firstName = firstName;
		this.lastName = lastName;
		this.email = email;
		this.courseID = courseID;
		this.title = titleArray;
		this.points = pointsArray;
 		this.assign = this.points.slice(0,4);
		this.exams = this.points.slice(-2); 
		this.assignments = function() { return task(this.title,this.points); }
		this.totalPoints = function() {return addExam(this.assign,this.exams); }
		this.finalGrade = calcGrade;
	}
	
	Student.prototype = {
		constructor : Student,
		toString : studentInfo
	};
	
 //assign and exam doesn't seem to hold no values inside.. ???	 
 	function addExam(assign,exams){
		var exams=this.exams;
		var high1=exams[0];
		var high2=0;
		while(high2<exams.length){
			high1=Math.max(high1,exams[high2]);
			high2++;
		}
		var sum = 0;
		for (var i=0; i < assign.length; i++){
			sum += assign[i];
		}
		return sum + high1;	
	} 
	var totalPoints = addExam();
	
	function calcGrade(){
		var grade;
		if (totalPoints >= 190){
			return "A+";
		}else if (totalPoints >= 180){
			return "A";
		}else if (totalPoints >= 175){
			return "B+"
		}else if (totalPoints >= 170){
			return "B";
		}else if (totalPoints >= 165){
			return "B-";
		}else if (totalPoints >= 160){
			return "C";
		}else if (totalPoints >= 150){
			return "D";
		}else if (totalPoints < 150){
			return "F";
		}
	}
	
	function studentInfo(){
			 return "Student : " + this.lastName + "," + this.firstName + "<br>"+ "eMail : " + this.email + "<br>" + "Course ID : " + this.courseID + "<br>" + "--------------------------------" + "<br>" + this.assignments() +  "--------------------------------" + "<br>" + "Total Points : " + this.totalPoints() + "<br>" + "Final Grade : " + this.finalGrade();
	}
	
 	function createStudents(){
		var student1 = new Student("Jake", "Hennry", "jhennery@gmail.com","COIN-070B.01", ["Assignment1","Assignment2","Assignment3","Assignment4","Assignment5","MidTerm", "Final"], [25, 25, 28, 20, 29, 40, 40] );
		alert("Student : " + student1.lastName + "," + student1.firstName + "\n"+ "eMail : " + student1.email + "\n" + "Course ID : " + student1.courseID + "\n" + "---------------------------------------" + "\n" + student1.assignments() +  "\n" + "---------------------------------------" + "\n" + "Total Points : " + student1.totalPoints() + "\n" + "Final Grade : " + student1.finalGrade());
	}
	 
	var titleArray = ["Assignment1","Assignment2","Assignment3","Assignment4","Assignment5","MidTerm", "Final"];
	var pointsArray = [30, 30, 28, 27, 29, 41, 45];
	var student = new Student("Haripriyaa", "Ganesan", "haripriyaa@gmail.com","COIN-070B.01", titleArray, pointsArray );
   </script>
</head>
<body>
	<script type="text/javascript">    
		document.writeln(student.toString());
	</script>
</body>
</html>

Hi,
New to JS. Have ordered some new books, but need to get somethings going in the mean time.
What I wanted to do is to link to a new page having a date range input in the form of 6 text boxes, 2 sets of mm-dd-yy, from and to, where the upon loading the page box 1 of the from would auto focus and then auto tab and then post where php could take over on the server side. Setting up the form and the lay out, no problem. Auto focusing went just like expected using the following code, included because on the next step everything fell apart.
[/CODE]
<script type="text/javascript" >
window.onload=function() {
document.getElementById("input1").focus();
}
</script>
[/CODE]
So then the wheels came off and in response, began to simplify what was trying to be done to find where the issues were. As far as I can get working is:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" >
window.onload=function() {
	document.getElementById("input1").focus();
	}
</script>
<script type="text/javascript" >
function myFunc() {
alert("is this working");
}
</script>
</head>
<body>
<input id="input1" name="input1" type="text" onkeyup="myFunc()" maxlength="2" value="type a No." />
</body>
</html>

First issue with this: When I first get to the page everything is just as ordered. The focus is on the text box and the default value is "type a No." When I press a key onkeyup, I bring up the alert box with "is this working" in it. But when I refresh the page with the refresh button, after clicking the "ok" on the alert box, the character that was typed in is still displayed. If I use the link to the page, or the URL from the address bar, then the page reloads properly with the default value, "type a No".
Question 1: How do you get the default textbox value using the refresh button as apposed to reloading the page using a link or from the address bar? Using Firefox 8.0

Second and more important at the moment: If I change the script to pass an argument to the function the script crashes. It does not pull up an alert box and freezes. My guess is that I'm doing something wrong on a concept level.
NOTE: changed the default value of the text box to " ". Looked like to me there was an issue with the size specification and the default string length as you could only enter in a key stroke by highlighting the text and replacing it
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" >
window.onload=function() {
	document.getElementById("input1").focus();
	}
</script>
<script type="text/javascript" >
function myFunc(awe) {
alert(awe);
}
</script>
</head>
<body>
<input id="input1" name="input1" type="text" onkeyup="myFunc("123")" maxlength="2" value="" />
</body>
</html>

Question 2: can someone straighten me out with this?

My java skill are rudimentary at best.

I have an email which has some values attached to a link in the email that get passed to an online form on a website when clicked. Problem is the value is a price and the string includes a "$" which I need to remove. I've read through many examples and everyone seems to have an opinion (surprise). One suggests something like this:
Code:

text2.value=text1.value.replace(/\$/g,"");

While someone else says its better to remove what you don't want. I am also scratching my head over should I place the value into a hidden field, scrub it then copy that into the proper field? and I imagine the best way would be to run it with an "onload" command instead or a event handler like a keystroke since the field is not typed? Roundtable discussion would be appreciated to help me solve this simple problem and help expand my knowledge of java... thanks.

Hello,

I am trying to update an iframe when the user makes a selection from a select box.

I don't have any trouble with changing the iframe, but when I try to send a varible as a quey string, the variable doesn't pass to the iframe properly.

// this is in my header, and it is initiated from the onchange below.
// it changes the page fine, but doesn't read the varible "num"
// that was passed to the function

<script language="javaScript">
<!--
function updatenotes (num) {
document.getElementById("desc").src = 'iframe1.cfm?dec=num'
}
//-->
</script>

// this is the select box that initiates the function from onchange
// for simplicities sake, I hard coded 3 options, but in reality,
// these options are ever changing

<select name="Description" onchange="updatenotes(this.options[selectedIndex].value)">
<option name="">Select a project</option>
<option name="2" >project2</option>
<option name="3" >project3</option>
</select>

Any help you can offer would me ver appreciated.
thanks

hy all, I am creating an accordion menu that when i press the " UNIT " tab, it opens up a list of " Chapters " tab, and when i press on any one of those chapters, a list of lessons opens up. Till now, i have managed to create all the appropriate lists, but in default, lessons and chapters are opened automatically, and the lessons elements when pressed do not scroll back up to the chapters parents. My html5 file:
Code:

<script type="text/javascript" src="jqueryjs.js"></script>
<script type="text/javascript" src="jqueryuiaccor.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#accordion').accordion();
    });
</script>

<div id="container">
<div id="content">
<div id="sidebar">
        <ul id="accordion">
            <li>
                <a href="#recent" class="heading">Unit 1</a>    
                    <ul id="accordion">             
                        <li> <a href="#recent" class="heading">Chapter 1 </a> </li>
                                <ul id="accordion2">
                                    <li> Lesson 1 </li>
                                </ul>
                    </ul>
                    </li>
                    <li>
                    <a href="#recent" class="heading">Unit 2</a>    

                    <ul id="accordion">             
                        <li> <a href="#recent" class="heading">Chapter 1 </a> </li>
                                <ul id="accordion">
                                    <li> <a href="#recent" class="heading" role="tab" aria-expanded="true">Chapter 2 </a>
                                        <ul id="accordion">
                                            <li> <a href="#recent" class="heading">Lesson 1 </a></li>
                                        </ul>
                                    </li>
                                </ul>
                    </ul>
            </li>
        </ul>       
    </div>
    </div>
</div>

My acorjs.js file:

Code:

$(document).ready(function() {
    $('ul#accordion a.heading').click(function() {
        $(this).css('outline','none');
        if($(this).parent().hasClass('current')) {
            $(this).siblings('ul').slideUp('slow',function() {
                $(this).parent().removeClass('current');
                $.scrollTo('#accordion',1000);

            });
        } else {
            $('ul#accordion li.current ul').slideUp('slow',function() {
                $(this).parent().removeClass('current');
            });
            $(this).siblings('ul').slideToggle('slow',function() {
                $(this).parent().toggleClass('current');
            });
            $.scrollTo('#accordion',1000);

        }
        return false;

    });

});

Please HELP!

Hello,

I have a multi-dimensional object, derived from JSON returned by the Foursquare API. The object has the following structure (as printed using a print_r type method from http://www.openjs.com/scripts/others...hp_print_r.php

PHP Code:
    '0' 
        'id' => "27110xxx"
        'created' => "Sun, 11 Apr 10 15:09:45 +0000"
        'timezone' => "America/New_York"
        'user' ...
            'id' => "48xxx"
            'firstname' => "Barry"
            'lastname' => "xxx"
            'photo' => "http://playfoursquare.s3.amazonaws.com/userpix_thumbs/4abb5bxxxxxx.jpg"
            'gender' => "male"
        'display' => "xxxx. @ [off the grid]"
    '1' ...
        'id' => "2538xxxx"
        'created' => "Wed, 07 Apr 10 13:24:41 +0000"
        'timezone' => "Europe/London" 


Could anyone tell me the best way to access its elements? I have this so far which gets the required values, but I want to preserve the order ie. get the data from the first element in the object first, then move to the next - each element represents a user so I want to keep their data separate.

PHP Code:
/* This is a custom function which has the same function as print_r */
    function dump(arr,level) {
        
        var firstName, lastname, geolat, geolong, photo;
        
        var dumped_text = "";
        if(!level) level = 0;
        
        //The padding given at the beginning of the line.
        var level_padding = " ";
        for(var j = 0; j < level + 1; j++) level_padding += "    ";
        
        if(typeof(arr) == 'object') { //Array/Hashes/Objects 
            for(var item in arr) {
                var value = arr[item];
                
                if(typeof(value) == 'object') { //If it is an array,
                    dumped_text += level_padding + "'" + item + "'\n";
                    dumped_text += dump(value,level + 1);
                } else {
                    dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
                }
                
                if (item == 'firstname')   {
                    firstname = value;
                    document.write("First name: " + firstname + "<br />");
                    document.write(item);
                }
                
                if (item == 'lastname')   {
                    lastname = value;
                    document.write("Last name: " + lastname + "<br />");
                    document.write(item);
                }
                
                if (item == 'geolat') {
                    geolat = value;
                    document.write("Latitude: " + geolat + "<br />");
                    document.write(item);
                }
                
                if (item == 'geolong')  {
                    geolong = value;
                    document.write("Longitude: " + geolong + "<br />");
                    document.write(item);
                }
            }
        } else { //Stings/Chars/Numbers etc.
            dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
        }
        return dumped_text;
    }
    
    var myObj = <?php echo json_encode($checkin); ?>;
    
    alert(dump(myObj));

Sorry for the bloated code, I normally work in Java and PHP so although I understand the theory, I haven't worked with objects much in JavaScript before. Any help would be much appreciated!

What i have is a system where the amount of HTML lines is generated by php when the page loads. Each time has exactly the same set up except there names have an int added to them in accending order.

What i need is for them to pass a variable to the javascript function telling them what number they are, and the javascript then using this to access it to read and change information.

Is the line below correct for this task?

Code:

document.Purchase.(Tax+i).selectedIndex;

I have developped a script in order to resize the height of a div on a web page in order to display it at least up to the size of the window. Here is the code:

function resize(){
var frame = document.getElementById("content");
var padding_top = parseInt(window.getComputedStyle(frame,null).getPropertyValue("padding-top"));
var padding_bottom = parseInt(window.getComputedStyle(frame,null).getPropertyValue("padding-bottom"));
var padding = padding_top + padding_bottom;
var bodyheight = document.body.scrollHeight;
var windowheight = window.innerHeight;
if (bodyheight < windowheight){
frame.style.height = windowheight - padding + "px";
}
}

It works well, but I was wondering why I am not able to get the padding-top and -bottom using these two instructions:

var padding_top = frame.style.paddingTop;
var padding_bottom = frame.style.paddingBottom;

The script runs but Firebug shows empty strings for both values. How come? Is there a bug in Firefox?

Thanks inadvance for your time and help.

Hey

is it possible to access javascript variables in an iframe src page from the parent page, or vice versa. How do you do this? What about the DOM?

thanks

I'm trying to accessing the Parent window fom a sub window previously opened using window.open

I'm using firebug to t yand debug, and it shows that this DOM entry exists..
window.opener.location.href
But trying to access it gives "window opener is null" error



I've tried all these, and get the various errors tagged on the end...

Code:

<script language="JavaScript">
//alert(opener.location); // =  opener is null
//alert(opener.location.href); // =  opener is null
//alert(parent.location); // = uncaught exeption - could not convert to javascript argument arg 0
//alert(parent.location.href); // = Permission denied to get property Location.href
//alert(parent.opener.location); // = uncaught exeption - could not convert to javascript argument arg 0
//alert(parent.opener.location.href); // = Permission denied to get property Location.href
//alert(parent.window.opener.location.href); // = Permission denied to get property Location.href
//alert(parent.window.opener.location.href); // = Permission denied to get property Location.href
//alert(window.opener.location); // = window opener is null
//alert(window.opener.location.href); // = window opener is null
//alert(window.parent.location); // = uncaught exeption - could not convert to javascript argument arg 0
</script>

driving me crazy! Anyone have a solution?

i m trying to extract data from an xml file and display data on Google maps
but when i try to run my code

In IE - Access denied error is display (while accessing the xml file)
Mozilla - code is working fine but displays following error -
Error: xmlDoc.getElementsByTagName("lat")[1] is undefined
Source File: file:///I:/BE%20Project%20Data/coding/Myexample/exam2.html
Line: 48

HTML file-

<html>
<head>
<title>Google Maps JavaScript API v3 Example: Fusion Tables Layer</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 500px;width: 800px }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","agridata.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var latlng = new google.maps.LatLng(48.75028,-94.91667);
var mapOpts = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOpts);

var l1=xmlDoc.getElementsByTagName("lat")[1].childNodes[0].nodeValue;
var l2=xmlDoc.getElementsByTagName("lng")[1].childNodes[0].nodeValue;

var pt = new google.maps.LatLng(parseFloat(l1), parseFloat(l2));
var marker = new google.maps.Marker({
position: pt,
map: map,
title: 'Just a simple marker'});
}
</script>
</head>
<body onload="initialize();">
<h1>output</h1>
<div id="map_canvas"></div>
</body>
</html>


XML file -
<?xml version="1.0"?>

<markers>

<marker>
<lat>52.09667</lat>
<lng>-173.50056</lng>
<state>Alaska</state>
<county>Aleutian</county>
</marker>

<marker>
<lat>48.75028</lat>
<lng>-94.91667</lng>
<state>Minnesota</state>
<county>Lake of woods</county>
</marker>


<marker>
<lat>52.09667</lat>
<lng>-173.50056</lng>
<state>Washington</state>
<county>Stevans</county>
</marker>

</markers>


do let me know the reason behind the undefined error and ACCESS DENIED error ... i have tried modification in the security setting of the browser but error is not solved yet ...

thks