Javascript Tut

Ok, pretty much the most important thing in Javascript is editing text on a web page. This can be done really easily.

say the HTML of a page was something like this

Code:

<table>
<tr>
<td class='notinfo'>nothing so far</td>
<td class='info'>nothing so far</td>
</tr>
</table>

so pretty much what you would do if you want to change the text "nothing so far" to something else... what you would do is..

Code:

<script type='text/javascript'>
var a = document.getElementsByTagName("td") 
for(x=0;x<a.length;x++){ 
if(a[x].className == "info"){
a[x].innerHTML = "Alot to be done"
}}
</script>

so pretty much what happens is the code loops through all the elements "td" on the page until it finds one with the className "info" and then changes the text.

another technique that is helpful is:

document.getElementById("")

an example of this is

a HTML page is this

Code:

<table>
<tr>
<td class='notinfo' id='yes'>nothing so far</td>
<td class='info' id = 'not'>nothing so far</td>
</tr>
</table>

so to change the text of the element with the id "yes" we would do this...

Code:

<script type='text/javascript'>
var a = document.getElementById("yes")
a.innerHTML = "Alot to be done"
</script>

hope this helped

 

first, this topic should be in the "user education" forum... and second.. whats the point with this code?? I'm don't know any javascript but I mean, why not just change the text in the html code?... can you give any example of how it else could be used? thx..

 

Javascript is for the dynamic display of content. i.e. Click a link and the contents of a table change, etc.

 

Umm because there are some sites such as InvisionFree where you cant edit the HTML.. you can also use javascript to get information... and use it to do other things like a simple IF money per post script

Code:

<script language="JavaScript">
mname="Dollars";
msymbol="$";
perpost=10;
tds=document.getElementsByTagName("span");
pattern=/Posts: ([0-9,]*)/ig;
for (p=0; p<tds.length; p++) {
if (tds[p].className=="postdetails" && tds[p].innerHTML.match(pattern)!=null) {
money=parseFloat(RegExp.$1.split(",").join(""))*perpost;
tds[p].innerHTML+=mname+": "+msymbol+money;
}
}
</script>

or it can be done even simpler by

Code:

<script type='text/javascript'>
var currencyname = "Credits"
var gain = "2"
var symbol = "$"

if(location.href.match(/showtopic=/i)){
var a=document.getElementsByTagName("span")
for(i=0;i<a.length;i++){
if(a.className=="postdetails" && a.innerHTML.match(/Posts: (\d+)/)){
howmuch = gain*RegExp.$1
a.innerHTML += "<br /><b>" + currencyname + " </b>: " + symbol + howmuch + "";
}}}
{

</script>

 

If you're going to have only one class named "info" and "notinfo", you might as well use "id" instead, and it would be easier seeing as you would be able to use getElementById.

Also, if you're going to make a tutorial on this kind of thing, it would be helpful if you used more descriptive variable names instead of a single letter.

 

I chose not to do .getElementById() because this is how it is set on some websites that you dont have access to the HTML... not exactly like this but it is an example...

I did use .getElementById() later

There is a simple reason that i did that, its because most people don't use detailed names in there variables... and i think a simple explanation of it should be sufficient...

 

The main use of innerHTML is not for pages where you can't edit the HTML but for dynamic content, like Swan said.

 

I never said it was? but i just gave an example of things you can do...