Rewriting content of an HTML element using JavaScript

You are changing the value of the variable oldSource, not the value of the documentElement.innerHTML.

.innerHTML just returns a string that contains the serialised content of that element. It doesn't return a reference to the content in the DOM.

Furthermore, document.write(Change(oldSource)) is saying write the return value of Change(oldSource) to the document... but your Change() function doesn't return anything, hence it is undefined.

Lastly, strings are immutable, meaning you can't change their contents after they have been created. Instead, you need to build up a new string in your function, like so:

function Change(source){
   new_source = ""
   for (i=0; i < source.length; i++){
     new_source = new_source + "S"; //doesn't change the source[i]
   }
   return new_source
}

You can check all of this out in this jfiddle.

You need to return( source ); after your for loop

JavaScript strings are immutable. You can't use

source[i]="S";

to modify a string. You need to build a new string and return it.

It should be < source.length as well.

In JavaScript, this line: var oldSource = document.documentElement.innerHTML; copies the innerHTML into the oldSource variable. It does not save a reference to the innerHTML.

You are modifying the value stored in oldSource, but never applying it to the document.

In your Change function, you do not return any value - that is why you are getting an undefined. Add a 'return source;in yourChange` function to return a value.

The other problem is that you can't change the string in JavaScript. You should make a new variable for this. You can't edit source[i] - you can only retrieve the value that is there.

You need to return the new source string like below;

var oldSource = document.documentElement.innerHTML;
alert(oldSource); //this works, it gets the whole html

document.write(Change(oldSource)); //doesn't work, writes undefined

function Change(source){
     for (i=0; i<=source.length; i++){
         source[i]="S"
     }
     return source;
}

1. your function must return something, not just change
2. you cannot change strings this way, use .replace() method instead
3. if you specify what you really need to do, our help could be more effective

EDIT As far as I didn't find correct working code here, I want to suggest my one

function Change(source){
   var str = source.split("");
   for (var i=0; i<source.length; i++){
     str[i] = "S";
   }
   return str.join("");
}

Maybe it's not the fastest way (though, why not) but it lets you to operate with indexes as you tried in your question.

working fiddle for Lego Stormtroopr

EDIT2 and this example shows how to do it in one line inside the loop (without creating extra variables)

   for (var i=0; i<source.length; i++){
     source = source.replace(new RegExp(source[i]), "S");
   }