Results 1 to 7 of 7

Thread: javascript getElementById

  1. #1
    Join Date
    Oct 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default javascript getElementById

    dear coders,
    the code below is just a test script, my code is processed by a mysql while loop.
    That's why the form id and function vars are not unique.

    I'm trying to solve the getElementById problem...
    Only the first textarea is working properly!

    Is there a way to use something like getElementsBy selected textarea?

    HTML Code:
    <html>
    <head>
    
    <script type="text/javascript">
    
    function CodeBold(tekstveld_naam){
    // code for IE
    	var textarea = document.getElementById(tekstveld_naam);
    	if (document.selection){
    		textarea.focus();
    		var sel = document.selection.createRange();
    		if (sel.text != ''){
    			sel.text = '<b>' + sel.text + '</b>';
    		}
    	}
    // code for Mozilla
    	var textarea = document.getElementById(tekstveld_naam);
    	var len = textarea.value.length;
    	var start = textarea.selectionStart;
    	var end = textarea.selectionEnd;
    	var sel = textarea.value.substring(start, end);
    	var replace = '<b>' + sel + '</b>';
    	if (sel != ''){
    		textarea.value =  textarea.value.substring(0,start) + replace + textarea.value.substring(end,len);
    	}
    }
    
    function CodeH1(tekstveld_naam){
    // code for IE
    	var textarea = document.getElementById(tekstveld_naam);
    	if (document.selection){
    		textarea.focus();
    		var sel = document.selection.createRange();
    		if (sel.text != ''){
    			sel.text = '<h1>' + sel.text + '</h1>';
    		}
    	}
    // code for Mozilla
    	var textarea = document.getElementById(tekstveld_naam);
    	var len = textarea.value.length;
    	var start = textarea.selectionStart;
    	var end = textarea.selectionEnd;
    	var sel = textarea.value.substring(start, end);
    	var replace = '<h1>' + sel + '</h1>';
    	if (sel != ''){
    		textarea.value =  textarea.value.substring(0,start) + replace + textarea.value.substring(end,len);
    	}
    }
    
    </script>
    
    </head>
    
    
    <body>
    
    
    
    <form id="form1" name="form1" method="post" action="">
    <div>
    	<a href="#" onClick="CodeBold('textarea');return false;"><img src="_images/bold.jpg"></a>
    	<a href="#" onClick="CodeH1('textarea');return false;"><img src="_images/h1.jpg"></a>
    </div>
    
    <br />
    	<textarea name="textarea" id="textarea" cols="45" rows="5">this is the text in the textarea</textarea>
    </form>
    
    
    
    
    
    <form id="form1" name="form1" method="post" action="">
    <div>
    	<a href="#" onClick="CodeBold('textarea');return false;"><img src="_images/bold.jpg"></a>
    	<a href="#" onClick="CodeH1('textarea');return false;"><img src="_images/h1.jpg"></a>
    </div>
    
    <br />
    	<textarea name="textarea" id="textarea" cols="45" rows="5">this is the text in the textarea</textarea>
    </form>
    
    
    
    </body>
    </html>
    Last edited by traq; 10-22-2013 at 11:36 PM. Reason: please use the forum's BBCode tags to format your code.

  2. #2
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default

    Quote Originally Posted by tochrene View Post
    the code below is just a test script, my code is processed by a mysql while loop.
    That's why the form id and function vars are not unique.

    I'm trying to solve the getElementById problem...
    Only the first textarea is working properly!
    This is not a "problem" —it's the way getElementById is supposed to work.

    Test script or not, only one instance of any given id is allowed per document.

    Quote Originally Posted by tochrene View Post
    Is there a way to use something like getElementsBy selected textarea?
    You could use getElementsByName (names need not be unique), which would give you a list of all elements with the given name.

  3. #3
    Join Date
    Oct 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks for the reply, I've changed my code but I must have made an typo, the script doesn't do anything
    Must say I'm new to javascript, any help is appreciated


    HTML Code:
    <html>
    <head>
    
    <script type="text/javascript">
    
    function CodeBold(tekstveld_naam){
    // code for IE
    	var textarea = document.getElementsByClassName(tekstveld_naam);
    	if (document.selection){
    		textarea.focus();
    		var sel = document.selection.createRange();
    		if (sel.text != ''){
    			sel.text = '<b>' + sel.text + '</b>';
    		}
    	}
    // code for Mozilla
    	var textarea = document.getElementsByClassName(tekstveld_naam);
    	var len = textarea.value.length;
    	var start = textarea.selectionStart;
    	var end = textarea.selectionEnd;
    	var sel = textarea.value.substring(start, end);
    	var replace = '<b>' + sel + '</b>';
    	if (sel != ''){
    		textarea.value =  textarea.value.substring(0,start) + replace + textarea.value.substring(end,len);
    	}
    }
    
    function CodeH1(tekstveld_naam){
    // code for IE
    	var textarea = document.getElementsByClassName(tekstveld_naam);
    	if (document.selection){
    		textarea.focus();
    		var sel = document.selection.createRange();
    		if (sel.text != ''){
    			sel.text = '<h1>' + sel.text + '</h1>';
    		}
    	}
    // code for Mozilla
    	var textarea = document.getElementsByClassName(tekstveld_naam);
    	var len = textarea.value.length;
    	var start = textarea.selectionStart;
    	var end = textarea.selectionEnd;
    	var sel = textarea.value.substring(start, end);
    	var replace = '<h1>' + sel + '</h1>';
    	if (sel != ''){
    		textarea.value =  textarea.value.substring(0,start) + replace + textarea.value.substring(end,len);
    	}
    }
    
    </script>
    
    </head>
    
    
    <body>
    
    
    
    <form class="form1" name="form1" method="post" action="">
    <div>
    	<a href="#" onClick="CodeBold('textarea_class');return false;"><img src="_images/bold.jpg"></a>
    	<a href="#" onClick="CodeH1('textarea_class');return false;"><img src="_images/h1.jpg"></a>
    </div>
    
    <br />
    	<textarea name="textarea" class="textarea_class" cols="45" rows="5">this is the text in the textarea</textarea>
    </form>
    
    
    
    
    
    <form class="form1" name="form1" method="post" action="">
    <div>
    	<a href="#" onClick="CodeBold('textarea_class');return false;"><img src="_images/bold.jpg"></a>
    	<a href="#" onClick="CodeH1('textarea_class');return false;"><img src="_images/h1.jpg"></a>
    </div>
    
    <br />
    	<textarea name="textarea" class="textarea_class" cols="45" rows="5">this is the text in the textarea</textarea>
    </form>
    
    
    
    </body>
    </html>
    Last edited by traq; 10-24-2013 at 12:59 AM.

  4. #4
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default

    Please use the forum's bbcode tags and indent your code to make it more readable:

    for php code............[php] <?php /* code goes here */ ?> [/php]
    for html...............[html] <!-- markup goes here -->.....[/html]
    for js/css/other.......[code] code goes here................[/code]

    results in:
    PHP Code:
     <?php /* code goes here */ ?>
    HTML Code:
     <!-- markup goes here -->
    Code:
     code goes here


    You should probably make a jsfiddle so you can better demonstrate / work on your problem.

    The first error that comes up is Uncaught TypeError: Cannot read property 'length' of undefined. It's referring to this line:
    Code:
    var len = textarea.value.length;
    textarea is not your textarea; it's a list of all textareas that have the class "textarea_class". You need to choose one of those textareas to do your work on (e.g., textarea = textarea[0];).

    However, you'll probably notice that this means you don't know if you are working on the textarea that was clicked on, or one of the others. Going back to your original code, using a unique id instead of a class name is probably the simplest way to solve this problem.

  5. #5
    Join Date
    Oct 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    solved it...

    Simply added a number to the textarea's id's with a for loop into the while loop.
    The id's of the textarea's are now unique, problem solved

  6. #6
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,951
    Thanks
    43
    Thanked 3,194 Times in 3,157 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by tochrene View Post
    solved it...

    Simply added a number to the textarea's id's with a for loop into the while loop.
    The id's of the textarea's are now unique, problem solved
    Right, see my reply to your other thread on this topic:

    http://www.dynamicdrive.com/forums/s...563#post301563

    Quote Originally Posted by jscheuer1 View Post
    If the real code is generated server side, you should increment the numbers. Like the second form should be form2. Likewise, the first textarea's id should be textarea1, the second textarea2. That way you can obtain a unique reference to each one via it's id.
    There's also an alternative solution. See the full post for details.

    Oh, and in the future, please open only one thread per topic.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. GetelementbyID help
    By iammow in forum JavaScript
    Replies: 0
    Last Post: 03-17-2011, 10:36 AM
  2. getElementById
    By Cercedilla in forum JavaScript
    Replies: 1
    Last Post: 05-28-2009, 11:00 AM
  3. getElementById('x').value vs. x.value
    By Pseudoquazi in forum JavaScript
    Replies: 5
    Last Post: 04-11-2008, 05:22 AM
  4. Problem with getElementByID
    By tudor.totolici in forum JavaScript
    Replies: 4
    Last Post: 07-30-2007, 09:48 AM
  5. GetElementByID
    By kriscons in forum JavaScript
    Replies: 2
    Last Post: 11-24-2005, 04:55 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •