Inserting a script

Replace all double quotes with single quotes? Don’t comment out your ending script tag and remove that CDATA stuff entirely.

Here is the script:
++++++++++++++++++

<script>
var username = 'feznizzle';
var hostname = 'gmail.com';
var linktext = username + '@' + hostname ;
document.write('' + linktext + '');
</script>

++++++++++++++++++

• This reply was modified 6 years, 9 months ago by pingram.

Thanks for the idea, still breaks Elementor.

The code I posted in the OP contains “smart quotes”, but I am not actually using those. That code *does* appear to work. But it breaks Elementor. By that I mean as soon as I paste the code in, everything on the right (my page) disappears… except my email address.

I tried pasting it in using an HTML widget, same problem.

Can you try pasting the code into an Elementor page?

Hah, I’m sorry I missed this. Your code specifically is what is causing this.

document.write('' + linktext + ''); <- this specifically

Do you know what document.write does? It’s basically taking the enitire page’s html, which provides the editor experience and content within it, and replacing it with your email address.

Doh! What the heck? I wonder why it works in the standard WP editor? I bet Elementor ‘write’ the page as well.

Hmmmmm.

How to contain? I thought the write was contained within the script.

Is there some other way to achieve this without using the write?

Also, you will likely need to go back into the back end of the page (in wp-admin area) and manually restore a revision from before you pasted that code.

The auto-save version (that happened when you pasted the code) is getting loaded automatically which replaces the page content entirely with your email address and the history function will not work because the “selectors” in the page that it needs to reload the past revision content with have been wiped out by the doc.write, so yeah you broke it pretty good =)

lolololol!

Luckily I was screwing around on a staging site, didn’t lose anything important. To mess around, I’ve just been cloning page drafts and—when it fails—deleting the drafts.

Soooo… obviously I’m not a coder. Any chance you could suggest a work around? ??

This little tool has been EXTREMELY handy in preventing spam bots from sniffing out my email. I’ve used it on many, many websites. I’d really like to be able to use it with Elementor!

You can’t use document.write once the document has completed loading (as in the case of using the Elementor editor). If you do, the browser will open a new document that replaces the current (editor iframe) thus breaking the editor.

When your code is pasted into the back end “text” area of wp-content editor, that code is not executing because the environment is within the back end. But if you save and view the front end, the entire wp-content is indeed replaced with your email address but the reason the header/footer and possibly sidebar remain is because of the way WordPress renders wp-content with the js already executed and document.write has not completed.

A better approach would be to target a selector or create one and append the script data (your email address) within an actual element and then append that element to the body or document.getElementByID(‘the_id’) of some element within the page, i.e. a section with an id (see commented out part below).

For example:

<script>
var username = 'feznizzle';
var hostname = 'gmail.com';
var linktext = username + '@' + hostname ;
var my_span = document.createElement('span');
var my_email = document.createTextNode('' + linktext + '');
my_span.appendChild(my_email);
//console.log(my_span);  //uncomment to test output in browser console
document.body.appendChild(my_span);
//document.getElementById('some_section').appendChild(my_span);
</script>

When I pasted your code in (via Elementor Text Editor widget), nothing happened to the Elementor page, nor the saved/updated actual page.

I did get closer with this code:
++++++++++++
<input type=”hidden” id=”A” value=”mittywalters1″ />
<input type=”hidden” id=”B” value=”gmail.com” />
<div id=”result”></div>

<script type=”text/javascript”>

var inputA = document.getElementById(“A”).value;
var inputB = document.getElementById(“B”).value;

var firstInput = inputA + “@”;
var secondInput = inputB + ‘<br />’;

document.getElementById(“result”).innerHTML = firstInput + secondInput;
</script>
<div id=”result”></div>
++++++++++++

Now if I could just figure out the mailto html. ??

This works!
+++++++++
<input id=”A” type=”hidden” value=”mittywalters1″ />
<input id=”B” type=”hidden” value=”@” />
<input id=”C” type=”hidden” value=”gmail.com” />
<input id=”D” type=”hidden” value=”mail” />
<input id=”E” type=”hidden” value=”to:” />
<div id=”result”></div>
<script type=”text/javascript”>
var inputA = document.getElementById(“A”).value;
var inputB = document.getElementById(“B”).value;
var inputC = document.getElementById(“C”).value;
var inputD = document.getElementById(“D”).value;
var inputE = document.getElementById(“E”).value;
var firstInput = ‘<p><span style=”font-size: 14px; font-weight: bold;”>Contact me via email:<br /> </span><span style=”font-size: 14px; text-decoration-line: underline; color: #3366ff;”>‘;
var secondInput = inputA + inputB + inputC + ‘</span></p>’;
document.getElementById(“result”).innerHTML = firstInput + secondInput;
</script>
<div id=”result”></div>
++++++++++

I’m displeased with it because it’s not easy to style. But whatevs. Before I go live, I’ll apply some css.

BTW…. Thank you SOOOOO much for all your help Philip. Though I didn’t end up using your solution, you did point me in the right direction!

• This reply was modified 6 years, 9 months ago by Feznizzle.

Glad to be of any help, cheers!