Problem with Variable Scope

**Cyclone** · 02-12-2009, 09:42 AM

Hi,

I'm thinking this has to do with the scope of the variable but I’m not sure. I'm trying to use document.write to write the variable on my page but it says, "undefined"

Calling the variable using an onclick event works though. I'm not sure what the difference is.

Test Page
http://www.inspiredvisuals.com/test/test/test2.html

Page Code

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" src="binaryajax.js"></script>
<script type="text/javascript" src="imageinfo.js"></script>
<script>readFileData('image.jpg');</script>
</head>

<body>
<a href="#" onclick = "alert(width)">Get Image Dimensions Using EXIF Data</a>
<script type="text/javascript">document.write('<br>'+width)</script>
</body>
</html>

javascript

Code:

/*
 * ImageInfo 0.1.2 - A JavaScript library for reading image metadata.
 * Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/
 * MIT License [http://www.nihilogic.dk/licenses/mit-license.txt]
 */

var useRange = true;
var Range = 632;
var iOffset = 2;
var width;
function readFileData(url)
{
	BinaryAjax(url,function(http) {findEXIFinJPEG(http.binaryResponse)},null,useRange ? [0, Range] : null)
}

function findEXIFinJPEG(oFile)
{
	while (iOffset < oFile.getLength())
	{	
		var iMarker = oFile.getByteAt(iOffset+1, true);
		if (iMarker == 225) {return readEXIFData(oFile)}
		else {iOffset += 2 + oFile.getShortAt(iOffset+2, true)}
	}
}

function readEXIFData(oFile) 
{	
	var oTags = readTags(oFile, (iOffset+18), (EXIF_TiffTags = {0x8769 : "ExifIFDPointer"}));
	var oEXIFTags = readTags(oFile, (iOffset+10 + oTags.ExifIFDPointer), (EXIF_Tags = {0xA002 : "PixelXDimension",0xA003 : "PixelYDimension"}));
	width=oEXIFTags["PixelXDimension"];
}

function readTags(oFile, iDirStart, oStrings) 
{
	var oTags = {};
	
	for (var i=0;i<oFile.getShortAt(iDirStart);i++)
	{
		var strTag = oStrings[oFile.getShortAt(iDirStart + i*12 + 2)];
		oTags[strTag] = oFile.getLongAt(iDirStart + i*12 + 10);
	}

	return oTags;
}

Thanks for the help.

**codeexploiter** · 02-12-2009, 10:37 AM

1. Insert the code in script element

Code:

function showWidth(){
	alert(width);
}

Change your anchor element's onclick event handler.

Code:

<a href="#" onclick="showWidth();return false;">Test</a>

It is not the issue of scope the usage of the variable - width as a part of the inline event handler. The same issue will happen if you use height as a part of the inline event handler. I don't know what are the other names that creates this issues but a userdefined variable name has lesser chance of failure like 'widthOfElement'

You can try this by changing the variable width to something else or can use non-inline event handler like the way I've shown in the first case.

Hope this helps

**Cyclone** · 02-12-2009, 11:19 AM

I think you misunderstood my problem. The onclick event in the link works. What doesn't work is the document.write code. Some how the width variable is getting lost or is not accessible?

Thanks though.

**codeexploiter** · 02-12-2009, 11:56 AM

The code you've been using has some IE specific code in it. The VBScript part will not work only in IE or the browsers that uses IE render engine.

When I have disabled the VBScript part then in Firefox too the initial value of 'width' correctly displayed. I don't have much idea about why you were using VBScript but it makes the page not proper in Firefox

**Twey** · 02-12-2009, 01:26 PM

Additionally, document.write() should not work in XHTML. The fact that it appears to be doing so here indicates that you are using pseudo-XHTML (i.e. not sending the correct Content-Type header). Of course, if you do use XHTML you will lose IE support, since IE does not currently support XHTML. If you want to support IE, it's best to stick with HTML 4.01 Strict for the time being. See the link in my signature for more information.

**Cyclone** · 02-13-2009, 01:38 AM

Codex -> The vb script is needed for the binaryajax script to load the binary data.

Twey -> I corrected the doc type. Made no difference though.

Ok, lets start at the begining. I changed the test page slightly and both IE/FF are having the same issues.

The imageinfo.js script when run will alert() the width variable. But on the actual text.html page the document.write() function does not have access to this variable for some reason and returns undefined. How do I pass this variable from the imageinfo.js script to my main html page so that document.write() has access to it?

Here is the updated code.
The readEXIFData(oFile) function is where the alert() is executed.
http://www.inspiredvisuals.com/test/test/test2.html

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<script type="text/javascript" src="binaryajax.js"></script>
<script type="text/javascript" src="imageinfo.js"></script>
<script>readFileData("image.jpg")</script>
</head>

<body>
<script type="text/javascript">document.write('<br>'+width)</script>
</body>
</html>

Code:

/*
 * ImageInfo 0.1.2 - A JavaScript library for reading image metadata.
 * Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/
 * MIT License [http://www.nihilogic.dk/licenses/mit-license.txt]
 */

var useRange = true;
var Range = 632;
var iOffset = 2;
var width;
function readFileData(url)
{
	BinaryAjax(url,function(http) {findEXIFinJPEG(http.binaryResponse)},null,useRange ? [0, Range] : null)
}

function findEXIFinJPEG(oFile)
{
	while (iOffset < oFile.getLength())
	{	
		var iMarker = oFile.getByteAt(iOffset+1, true);
		if (iMarker == 225) {return readEXIFData(oFile)}
		else {iOffset += 2 + oFile.getShortAt(iOffset+2, true)}
	}
	
}

function readEXIFData(oFile) 
{	
	var oTags = readTags(oFile, (iOffset+18), (EXIF_TiffTags = {0x8769 : "ExifIFDPointer"}));
	var oEXIFTags = readTags(oFile, (iOffset+10 + oTags.ExifIFDPointer), (EXIF_Tags = {0xA002 : "PixelXDimension",0xA003 : "PixelYDimension"}));
	width=oEXIFTags["PixelXDimension"];
	alert(width);
}

function readTags(oFile, iDirStart, oStrings) 
{
	var oTags = {};
	
	for (var i=0;i<oFile.getShortAt(iDirStart);i++)
	{
		var strTag = oStrings[oFile.getShortAt(iDirStart + i*12 + 2)];
		oTags[strTag] = oFile.getLongAt(iDirStart + i*12 + 10);
	}
	return oTags;
}

**Cyclone** · 02-13-2009, 08:08 AM

Ok. I truly am stumped. I tried everything I can think of and I still can't get this to work properly.

I managed to get document.write() to display the variable on the page in IE/FF, but now the page never stops loading. I think there’s an endless loop somewhere in the code...

Can someone help me figure this out please? I'm trying to get this problem solved. I normally only post here if I can't find a solution on goggle or if I'm really stuck on problem.

Thanks for the help.

http://www.inspiredvisuals.com/test/test/test3.html

Page Code

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<script>

function test(width)
{
document.write('Image Width = ' + width)
}
</script>

<script type="text/javascript" src="binaryajax.js"></script>
<script type="text/javascript" src="imageinfo.js"></script>

</head>

<body>
<script type="text/javascript">readFileData('image.jpg')</script>
</body>
</html>

Javascript

Code:

/*
 * ImageInfo 0.1.2 - A JavaScript library for reading image metadata.
 * Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/
 * MIT License [http://www.nihilogic.dk/licenses/mit-license.txt]
 */

var useRange = true;
var Range = 632;
var iOffset = 2;
var width;
function readFileData(url)
{
	BinaryAjax(url,function(http) {findEXIFinJPEG(http.binaryResponse);test(width)},null,useRange ? [0, Range] : null);
}

function findEXIFinJPEG(oFile)
{
	while (iOffset < oFile.getLength())
	{	
		var iMarker = oFile.getByteAt(iOffset+1, true);
		if (iMarker == 225) {return readEXIFData(oFile)}
		else {iOffset += 2 + oFile.getShortAt(iOffset+2, true)}
	}
	
}

function readEXIFData(oFile) 
{	
	var oTags = readTags(oFile, (iOffset+18), (EXIF_TiffTags = {0x8769 : "ExifIFDPointer"}));
	var oEXIFTags = readTags(oFile, (iOffset+10 + oTags.ExifIFDPointer), (EXIF_Tags = {0xA002 : "PixelXDimension",0xA003 : "PixelYDimension"}));
	width=oEXIFTags["PixelXDimension"];
	
}

function readTags(oFile, iDirStart, oStrings) 
{
	var oTags = {};
	
	for (var i=0;i<oFile.getShortAt(iDirStart);i++)
	{
		var strTag = oStrings[oFile.getShortAt(iDirStart + i*12 + 2)];
		oTags[strTag] = oFile.getLongAt(iDirStart + i*12 + 10);
	}
	return oTags;
}

Thread: Problem with Variable Scope

Thread Tools

Search Thread

Problem with Variable Scope

Bookmarks

Bookmarks

Posting Permissions