I'm creating variables through PHP and sending them to Javascript by echo'ing them, then using document.getElementById in JS to grab their values.
The problem with this I have realized is that the elements I am writing with their their php variables are being shown when anyone views the source. It's not behaving like JS where I can write HTML and nothing gets shown on the source (using document.write for example).
How can I send variables from PHP to JS without affecting the viewable source like JS does?
If you want it to behave like JavaScript, you can echo <script> [insert javascript] </script> and write document.write or whatever you choose inside those tags.
However, there is no way for you to keep it hidden if someone really wants to find out what is happening. HTML and JavaScript are both front-end. Your server is not doing anything at all when it comes to rendering HTML and executing JavaScript; it is all done by the user. And if the user is doing the calculations, the user also knows what is happening.
I do not see why you would want the HTML to be hidden anyway. Even if one cannot see the source code of HTML, one can still figure out more or less how to replicate what you have done (if the purpose of this is to keep the design a secret).