".. is not a function" errors

[bassleader]

Hi guys,

I have written some functions to write HTML code into a text area, a bit like the ones on this forum. I am trying to add them into another page, but I am getting errors. These are:

in IE: "Object doesn't support this property or method"
in Moz: "open_list is not a function"
in Opera: "the object does not implement [(Call)]

I'm guessing all these errors mean the same thing. Here is the code that works:

function add_heading(arg1){
// function to insert a heading into the text area.
var elem = document.getElementById(arg1);
elem.value += "<p style='font-weight: bold'>" + prompt("Enter your heading text") + "</p>";
}

function add_quote(arg1){
//function to insert a quote into the text area
var elem = document.getElementById(arg1);
elem.value += "<p style='font: bold italic'>&quot;" + prompt("Enter your quote text") + "&quot;</p>";
}

function open_list(arg1){
//function to open an unordered list in the text area
var elem = document.getElementById(arg1);
elem.value += "<ul>";
}

function close_list(arg1){
//function to close an unordered list in the text area
var elem = document.getElementById(arg1);
elem.value += "</ul>";
}

function list_item(arg1){
//function to add a list item to the text area
var elem = document.getElementById(arg1);
elem.value += "<li>" + prompt("Add list item text here") + "</li>";
}

<!-- some unrelated functions and the top of the HTML page... -->

<td width="35%" bgcolor="#DADADA">Left Column Contents:<br>
<textarea cols="71" rows="15" name="left_column" id="left_column" ></textarea>
</td>
<td width="65%">
<input type="button" name="heading_left" value="Heading" onclick="add_heading('left_column');"><br>
<input type="button" name="quote_left" value="Insert Quote" onClick="add_quote('left_column');"><br><br>
<input type="button" name="open_list_left" value="Open List" onClick="open_list('left_column')"><br>
<input type="button" name="list_item_left" value="List Item" onclick="list_item('left_column')"><br>
<input type="button" name="close_list_left" value="Close List" onClick="close_list('left_column');">
</td>

and this is the code that doesn't work:

function add_heading(arg1){
// function to insert a heading into the text area.
var elem = document.getElementById(arg1);
elem.value += "<p style='font-weight: bold'>" + prompt("Enter your heading text") + "</p>";
}

function open_list(arg1){
//function to open an unordered list in the text area
var elem = document.getElementById(arg1);
elem.value += "<ul>";
}

function close_list(arg1){
//function to close an unordered list in the text area
var elem = document.getElementById(arg1);
elem.value += "</ul>";
}

function list_item(arg1){
//function to add a list item to the text area
var elem = document.getElementById(arg1);
elem.value += "<li>" + prompt("Add list item text here") + "</li>";
}

<!-- some more functions and the top of the HTML page -->

<tr>
<td>
Internal Page Text
</td>
<td colspan="2">
<textarea cols="45" rows="10" name="internal_page_text" id="internal_page_text"></textarea>
</td>
<td>
<table>
<tr>
<td>
<input type="button" name="insert_heading" value="Heading" onclick="add_heading('internal_page_text');">
</td>
</tr>
<tr style="padding-top: 5px;">
<td>
<input type="button" name="open_list" id="open_list" value="Open List" onclick="open_list('internal_page_text');">
</td>
</tr>
<tr>
<td>
<input type="button" name="list_item" id="list_item" value="List Item" onclick="list_item('internal_page_text');">
</td>
</tr>
<tr>
<td>
<input type="button" name="close_list" id="close_list" value="Close List" onclick="close_list('internal_page_text');">
</td>
</tr>
</table>
</td>
</tr>

Why is it that the functions are recognised in the first example but not in the second? I'm sure I've closed all the brackets and tags on the page, though I apologise in advance if this turns out to be a typo.

Cheers,

BL

[beetle]

Well, normally if you get an error from a function or line, but nothing in the vicinty seems to contain anything wrong, then it's usually something that precedes it in the code. I suspect that this line (in both functions) is causing some problems.elem.value += "<p style='font: bold italic'>"" + prompt("Enter your quote text") + ""</p>"; Hopefully, you properly escaped the backslashes and the forum just removed them. But, for the sake of correctedness, here's how I would code it.elem.value += "<p style=\"font-weight: bold\">" + prompt('Enter your heading text') + "</p>";

[bassleader]

Thanks Beetle, I'll have a closer look at that line. It doesn't seem to explain why the functions are recognised in the first page but not the second one. I think there may be a difference in the HTML that calls them, but I'm just clutching at straws now.

BL

[bassleader]

I have solved this myself (after only four days of staring at it). The problem is, if you look at the second set of buttons in the table, I have given them the same name and id as the function I was trying to call. This seems to confuse the browser, so I changed the names and id's of the buttons and now it works. This also explains why the first code example works.

Obvious when it's pointed out, isn't it?

BL

[beetle]

Ahh yes, I admit...I didn't even look at the HTML, but naming objects and functions the same is for sure a no-no.

Glad you got it worked out.