Problem with 'this'

DavidinLondon · #1 Jun 6th, 2006, 15:09

Hi
I have written an image uploading script using php and js.

My js is a bit shaky when it comes to using the 'this' term for
functions

I am trying to use my UseImgId() and showImg() functions on all
five images ... but as you can see I haven't quite got there and need some help

Sorry the code is abit long but its only the 'this' bit that I don't get.

Thanks

HTML: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">

function UseImgId(this){
     document.getElementById('Image1').style.display = '';
      document.getElementById('Image1').src = fullName;
}

    var IE = true;
    if (navigator.appName != "Microsoft Internet Explorer"){IE = false}

    function showImg(){
  
        var fullName = document.forms[0].upLoad.value;
        var fileName = fullName.match(/[^\/\\]+$/);
        var splitName = fullName.split(".");
        var fileType = splitName[1];
        fileType = fileType.toLowerCase();
        if (fileType == 'gif' || fileType == 'jpg' || fileType == 'jpeg')
            {
             if (IE)
                {
                function UseImgId(this){
                }
             document.forms[0].fName.value = 'File name: '+fileName;
            } 
        else       {
              alert('Invalid file type');
            }
    }

</script>
</head>
<body>
<!-- Using a linked stylesheet -->
<link rel="STYLESHEET" type="text/css" href="yodbod.css">
<img alt="header (13K)" src="flashtest1.jpg" height="130" width="920" />

<div style='width:600px; position:absolute; left:40px; top:160px' >
<b><big>Adding pictures to your advert.</big></b><br>
<b>Select your picture files from your computer using the browse buttons.</b><br />
You can have up to five photos for all catagories except Jobs and Careers<br />
which excepts only one (we couldn't see any reason for more!).<br />
</div>

<form name="main_fm" enctype ="multipart/form-data" action="a_picts.php" method="POST">
<input type = 'hidden' name='run' value="on">
<input type="hidden" name ="MAX FILE SIZE" value="500000">
<input type = 'hidden' name='adref' value="<?php echo $A_ref ?>">

<div style='position:absolute; left:40px; top:320px' >
<b>First image:</b><br />
<input type="file" size="50" name="upLoad" onchange="showImg()"><br />
<input type="text" size="50" name="fName" readonly>
<input type="reset" onclick="document.getElementById('Image1').src='';document.getElementById('Image1').style.display='none'">
</div>

<div style='position:absolute; left:500px; top:262px' >
<img height='160' width='160' id="Image1" style='display:none' />
</div>

<div style='position:absolute; left:40px; top:440px' >
<b>Second image:</b><br />
<input type="file" size="50" name="upLoad" onchange="showImg()"><br />
<input type="text" size="50" name="fName" readonly>
<input type="reset" onclick="document.getElementById('Image2').src='';document.getElementById('Image2').style.display='none'">
</div>

<div style='position:absolute; left:500px; top:382px' >
<img height='160' width='160' id="Image2" style='display:none' />
</div>

<div style='position:absolute; left:40px; top:560px' >
<b>Third image:</b><br />
<input type="file" size="50" name="upLoad" onchange="showImg()"><br />
<input type="text" size="50" name="fName" readonly>
<input type="reset" onclick="document.getElementById('Image3').src='';document.getElementById('Image3').style.display='none'">
</div>

<div style='position:absolute; left:500px; top:502px' >
<img height='160' width='160' id="Image3" style='display:none' />
</div>

<div style='position:absolute; left:40px; top:680px' >
<b>Forth image:</b><br />
<input type="file" size="50" name="upLoad" onchange="showImg()"><br />
<input type="text" size="50" name="fName" readonly>
<input type="reset" onclick="document.getElementById('Image4').src='';document.getElementById('Image4').style.display='none'">
</div>

<div style='position:absolute; left:500px; top:622px' >
<img height='160' width='160' id="Image4" style='display:none' />
</div>

<div style='position:absolute; left:40px; top:800px' >
<b>Fifth image:</b><br />
<input type="file" size="50" name="upLoad" onchange="showImg()"><br />
<input type="text" size="50" name="fName" readonly>
<input type="reset" onclick="document.getElementById('Image5').src='';document.getElementById('Image5').style.display='none'">
</div>

<div style='position:absolute; left:500px; top:742px' >
<img height='160' width='160' id="Image5" style='display:none' />
</div>

<div style='position:absolute; left:370px; top:280px' >
<input type="submit" value="Upload All Images">
</div>

</form>
</body>
</html>

ukgeoff · #2 Jun 7th, 2006, 09:41

'this' is a keyword and is JavaScript's way of saying 'this object'. NOT to be confused with object oriented programming.

When you pass 'this' as a parameter to a function call, the function has a reference to the tag(element) that made the call.

It allows a function that provides an action to be called from multiple 'objects' and know which one to act on.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
First image problem and inline list problem	konnor5092	Web Page Design	8	Dec 1st, 2007 09:08

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
Problem with 'this'