Javascript Replace Text With HTML

Question

I'm doing some javascript replacement testing and have hit a wall.

The below code will replace the E10 but leave E0 alone while the E10 replacement line is present. I wish to eventually build this all the way up to E100 and then do the same for D0-100, C0-100, all the way to A and eventually S. I have pre-made graphics for all of it (Re-colored for each letter). However I can't seem to get it to function properly.

Anyone know how to make it replace each one and not just whichever one is loaded last?

<body onload="myFunction()">

E50  E30  E10 <br>

E60  E40  E0

</body>


<script>
function myFunction() {
    document.body.innerHTML = document.body.innerHTML.replace(/E0/g, '<img src="http://s31.postimg.org/5riz5vn0b/Zero.png"/>');
}
</script>

<script>
function myFunction() {
    document.body.innerHTML = document.body.innerHTML.replace(/E10/g, '<img src="http://s31.postimg.org/6wm82qo8r/ten.png"/>');
}
</script>

Any and all help would be appreciated.

You redeclare your myFunction so the first one gets removed and is never executed. — putvande
– putvande, Commented Jun 14, 2016 at 22:09
To generalize the lesson here: <script> blocks do not have any "scope". All <script> blocks loaded by the page are basically concatenated into one big script file. — user201891
– user201891, Commented Jun 14, 2016 at 22:26
Yes, I see that now. Thank you, I learned a great deal from this. — Christopher Thompson
– Christopher Thompson, Commented Jun 14, 2016 at 23:56

Adam Buchanan Smith · Accepted Answer · 2016-06-14 22:09:34Z

1

Call the function once and add both replaces in it: https://jsfiddle.net/rx3x75rk/

function myFunction() {
    document.body.innerHTML = document.body.innerHTML.replace(/E0/g, '<img src="http://s31.postimg.org/5riz5vn0b/Zero.png"/>');
    document.body.innerHTML = document.body.innerHTML.replace(/E10/g, '<img src="http://s31.postimg.org/6wm82qo8r/ten.png"/>');
}

answered Jun 14, 2016 at 22:09

Adam Buchanan Smith

9,4675 gold badges21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Christopher Thompson Over a year ago

Quick thing, any way to have this exclude making changes to input fields? It is currently effecting the entire site, which is great. I just didn't think about it effecting textareas. xD

Adam Buchanan Smith Over a year ago

@ChristopherThompson yes, but I would need some samples of what you want to change

Collectives™ on Stack Overflow

Javascript Replace Text With HTML

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related