Reputation: 183

Rewriting content of an HTML element using JavaScript

I'm new to JS, can't understand how to make this code work. I'm trying to overwrite the whole html source text.

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"; // doesn't change the source[i]
   }
}

Upvotes: 0

Answers (6)

vladkras

Reputation: 17227

your function must return something, not just change
you cannot change strings this way, use .replace() method instead
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");
   }

Upvotes: 0

user764357

Reputation:

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.

Upvotes: 2

Smith Wilsom

Reputation: 19

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;
}

Upvotes: 0

Cezary Wojcik

Reputation: 21845

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.

Upvotes: 0