javascript getElementById

**tochrene** · 10-22-2013, 10:58 PM

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>

**traq** · 10-22-2013, 11:43 PM

Originally Posted by tochrene

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.

Originally Posted by tochrene

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.

**tochrene** · 10-23-2013, 10:02 PM

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>

**traq** · 10-24-2013, 01:09 AM

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] .....[/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.

**tochrene** · 10-25-2013, 10:49 PM

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

**traq** · 10-26-2013, 05:24 AM

cool : )

**jscheuer1** · 10-26-2013, 01:40 PM

Originally Posted by tochrene

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

Originally Posted by jscheuer1

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.