PDA

View Full Version : help with innerHtml



tetrix
08-15-2008, 08:17 AM
hello

for example I have this function:

function ChangeTxt(txt) {
document.getElementById('ref').innerHTML = txt;
}


and this code in the body:

<td><a href="#nogo" onClick="ChangeTxt('ref:34<br>available sizes:s-m-l')"></a></td>


if i add the <b> tag to the text that will appear when onclick is executed(ChangeTxt function) the <b> tag is not taken into account, only the <br> tag works, i need also to put <spans> in this text, how can i make so tags are taken into account?

techno_race
08-15-2008, 02:16 PM
Did you forget your </b> and </span>s?
Please don't start a debate over whether it's <span>s or <spans>.

tetrix
08-15-2008, 04:39 PM
hi here is the example again: i added a span in the text and the function does not work for that onclick:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title></title>

<script language="JavaScript" type="text/javascript">
function ChangeTxt(txt) {
document.getElementById('ref').innerHTML = txt;
}
</script>

</head>





<body>


<table id="thumbnails">
<tr>
<td><a href="#nogo" onClick="ChangeTxt('oneoneoneone<b>one</b>oneone')">one</a></td>
<td><a href="#nogo" onClick="ChangeTxt('two<span style='color:red'>twotwotwo</span>twotwotwo')">two</a></td>
<td><a href="#nogo" onClick="ChangeTxt('threethreethreethreethree')">three</a></td>
</tr>
</table>



<div id="ref">oneoneoneone<b>one</b>oneone</div>



</body>

</html>

rangana
08-16-2008, 01:49 AM
You need to escape the quotes:


onClick="ChangeTxt('two<span style=\'color:red\'>twotwotwo</span>twotwotwo')">

jscheuer1
08-16-2008, 08:41 AM
Yes, you must escape any contained delimiters as rangana says, it doesn't hurt to escape closing slashes (/) too, as not doing so can confuse the browser, and will make your code invalid (usually there is no problem, so people often skip this). Also you should return false. If you are using this in several places, the easiest way is to return the function (get rid of the language attribute - it's deprecated):


<script type="text/javascript">
function ChangeTxt(txt) {
document.getElementById('ref').innerHTML = txt;
return false;
}
</script>

The when you use it (closing slashes escaped, return added):


<td><a href="#nogo" onclick="return ChangeTxt('oneoneoneone<b>one<\/b>oneone')">one</a></td>
<td><a href="#nogo" onclick="return ChangeTxt('two<span style=\'color:red\'>twotwotwo<\/span>twotwotwo')">two</a></td>
<td><a href="#nogo" onclick="return ChangeTxt('threethreethreethreethree')">three</a></td>

The return is very important because many browsers will still execute the link if the onclick event doesn't return false. Even though your link is to a named anchor, this will still reload the page in many browsers, wiping out any changes that the event made to the document.

tetrix
08-16-2008, 01:58 PM
thanks a lot for the explanations.

tetrix
08-16-2008, 09:04 PM
would it be possible to add something like this inside the function so to create a table?

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td></td>
</tr>
</table>

Twey
08-16-2008, 09:29 PM
Note that innerHTML is non-standard and should be avoided wherever possible.

jscheuer1
08-17-2008, 02:39 AM
Twey is of course correct here. However, many people find it simply easier to use the non-standard, but well supported innerHTML rather than the standard DOM 2 methods for updating content dynamically.

There are pitfalls if one goes the innerHTML route. If you give the browser incomplete tags, it may complete (close) them for you. Then if you later close them with a subsequent innerHTML directive, it can often lead to unexpected errors. Using innerHTML with forms, even when done so 'correctly', can lead to errors and/or unexpected results.

Tables are another area where odd things can happen. However, owing to the vagaries of support in various browsers, sometimes innerHTML is better for tables. But better still is using table's rows and cells collections and methods.

Getting back to your question:


would it be possible to add something like this inside the function so to create a table?


<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td></td>
</tr>
</table>

Yes you can do that. The best way (if using innerHTML) is to concatenate the entire desired markup to a variable, and then assign it to the target element's innerHTML. Otherwise you risk some of the pitfalls I mentioned earlier.

Now, I doubt that you really want to create:


<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td></td>
</tr>
</table>

because that wouldn't look any different than:


<br>&nbsp;

So, just what is it that you want to do?