Help with 'this' script

inspireddesign · July 30, 2009

Hello all,

I'm somewhat new to javascript and need a little help. I have the following code that supposed to update the preview div onkeyup. I'm trying to get more than one field to update the two displays using one function. I know that I can use "this" to handle what I'm trying to accomplish but can't seem to get it to work. I'm I close or way off here? Thanks for the help in advance.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

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

            var theInput = document.getElementById(this);
            var thePreview = document.getElementById(this);
            this.innerHTML = this.value;

    }
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>


<body onload="updatePreview();">

<div id="previewBox1">
Your preview will be displayed here.
</div>

<div id="contentBox1">
    <h2>The Content 1</h2>
    <textarea id="theInput1" onkeyup="updatePreview(this);"></textarea>
</div> 

<br />
<br />

<div id="previewBox2">
Your preview will be displayed here.
</div>

<div id="contentBox2">
    <h2>The Content 2</h2>
    <textarea id="theInput2" onkeyup="updatePreview(this);"></textarea>
</div> 

</body>
</html>

RichardRotterdam · July 30, 2009

I think you are missing what this stands for

Check the following:

<textarea id="theInput2" onkeyup="updatePreview(this);"></textarea>

In this code you pass "this" as arguement. "this" stands for the textarea element. the value of this here is the textarea as an object.

in the following function is where it goes wrong

function updatePreview(){

var theInput = document.getElementById(this);
var thePreview = document.getElementById(this);
this.innerHTML = this.value;

}

In the function there is no param set where you are trying to pass an element

here is an example that will show the value of textarea

function updatePreview(textareaElement){
  var value = textareaElement.value; //has the value of the texarea
  /**
   *the rest of your preview function here
   */

}

KevinM1 · July 30, 2009

Hello all,

I'm somewhat new to javascript and need a little help. I have the following code that supposed to update the preview div onkeyup. I'm trying to get more than one field to update the two displays using one function. I know that I can use "this" to handle what I'm trying to accomplish but can't seem to get it to work. I'm I close or way off here? Thanks for the help in advance.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

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

            var theInput = document.getElementById(this);
            var thePreview = document.getElementById(this);
            this.innerHTML = this.value;

    }
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>


<body onload="updatePreview();">

<div id="previewBox1">
Your preview will be displayed here.
</div>

<div id="contentBox1">
    <h2>The Content 1</h2>
    <textarea id="theInput1" onkeyup="updatePreview(this);"></textarea>
</div> 

<br />
<br />

<div id="previewBox2">
Your preview will be displayed here.
</div>

<div id="contentBox2">
    <h2>The Content 2</h2>
    <textarea id="theInput2" onkeyup="updatePreview(this);"></textarea>
</div> 

</body>
</html>

Unfortunately, you're way off. 'This' literally means the current object, which generally means the element you're currently accessing. Passing 'this' to the function doesn't make sense, as the function already has access to 'this' since it's attached to that element's event handler. Also, you can't pass 'this' into getElementById. It expects a string containing the id of the element you're trying to obtain. What you want instead is something like:

<html>
<head>
   <script type="text/javascript">
      window.onload = function(){
         var inputCount = document.getElementsByTagName('textarea').length;

         for(var i = 0; i < inputCount; ++i){
            var oInput = document.getElementById('theInput' + i);
            var oPreview = document.getElementById('previewBox' + i);

            oInput.onkeyup = function(){
               oPreview.innerHTML = this.value;
            }
         }
      }
   </script>
</head>

<body>

<div id="previewBox1">
Your preview will be displayed here.
</div>

<div id="contentBox1">
    <h2>The Content 1</h2>
    <textarea id="theInput1"></textarea>
</div> 

<br />
<br />

<div id="previewBox2">
Your preview will be displayed here.
</div>

<div id="contentBox2">
    <h2>The Content 2</h2>
    <textarea id="theInput2"></textarea>
</div>

</body>
</html>

inspireddesign · July 30, 2009

Thanks guys,

I'm looking at the second solution from Nightslyr. Do you need to have the onload code? I would rather have onkeyup within the element. I understand a little more based on both examples given (thank you). The second option however doesn't work as coded. Not sure why.

Thanks.

Damian

RichardRotterdam · July 30, 2009

Do you need to have the onload code? I would rather have onkeyup within the element.

No you don't , however Nightslyr uses the unobtrusive notation which is IMHO easier to read and easier to adjust over embedded javascript events such as:

<input onclick=functionName() />

The second option however doesn't work as coded. Not sure why.

It's most likely he hasn't tested the code but other then that the script is pretty much all you need all written out for you. I'm gonna be mean and not correct it for you. Instead I am going to give you a hint so you understand why it doesn't work.

Notice the loop?? it starts with 0 while your id's begin with 1

KevinM1 · July 30, 2009

Yeah, I rushed and didn't double-check my array indexes. Also, I had to fix a closure issue (a more advanced JavaScript thing). Now, you don't need to stick everything in window.onload. I like doing things that way for the reasons Dj Kat mentioned. Notice how all the script is in one location rather than strewn about the markup? There's no JavaScript in the markup at all. This makes both the script and the markup easier to edit, debug, etc., and it saves you from sticking function invocations everywhere, which can become a PITA with pages that require the same operations on a multitude of elements.

Anyhoo, here's new, functioning code for you:

<html>
<head>
   <script type="text/javascript">
      window.onload = function(){
         var inputCount = document.getElementsByTagName('textarea').length;
         alert(inputCount);

         for(var i = 0; i < inputCount; ++i){ 
           (function(){  // <-- fixes the closure issue
              var oInput = document.getElementById('theInput' + (i + 1));
              var oPreview = document.getElementById('previewBox' + (i + 1));
           
              oInput.onkeyup = function(){
              oPreview.innerHTML = this.value;
              }
            })(); // <-- ditto
         }
      }
   </script>
</head>

<body>

<div id="previewBox1">
Your preview will be displayed here.
</div>

<div id="contentBox1">
    <h2>The Content 1</h2>
    <textarea id="theInput1"></textarea>
</div>

<br />
<br />

<div id="previewBox2">
Your preview will be displayed here.
</div>

<div id="contentBox2">
    <h2>The Content 2</h2>
    <textarea id="theInput2"></textarea>
</div>

</body>
</html>

RichardRotterdam · July 30, 2009

Hehe to be honest I actually had to double check if I wasn't saying anything incorrect myself here. Turns out the array index fix wouldn't have been enough to fix it. So just a little addon to the information already given by Nightslyr.

Without the closure fix the reference to the correct preview box will be screwed up. The output on the keyup will always be the last previewBox. So that's what the closure fix was for. Didn't knew before so I learned something new too here.

Sign In

Help with 'this' script

Recommended Posts

inspireddesign

Link to comment

Share on other sites

RichardRotterdam

Link to comment

Share on other sites

KevinM1

Link to comment

Share on other sites

inspireddesign

Link to comment

Share on other sites

RichardRotterdam

Link to comment

Share on other sites

KevinM1

Link to comment

Share on other sites

RichardRotterdam

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information