Log in

View Full Version : 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>
<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
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 (https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById) is supposed to work.

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


Is there a way to use something like getElementsBy selected textarea?
You could use getElementsByName (https://developer.mozilla.org/en-US/docs/Web/API/document.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>
<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 /* code goes here */ ?>
for html...............
<!-- markup goes here -->.....
for js/css/other.......
code goes here................
results in:
<?php /* code goes here */ ?>

<!-- markup goes here -->

code goes here

You should probably make a jsfiddle (http://jsfiddle.com) 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:
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
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/showthread.php?75562-document-getElementById-alternative&p=301563#post301563


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.