Wordpress: how to use javascript variables into html body

Question

I'm really new in Wordpress, Javascript and HTML so I know this question is really basic, but I wasn't able to find it solved anywhere.

I want to create some variables in javascript and then display them in my page which is created in Wordpress.

Reading other posts I've found I need to insert a javascript code that at the end stores my variable this way (dummy version):

<script type="javascript"> 
     document.getElementById('test').innerHTML = 'hello';
</script>

And then on the text block I want to display my variable to be displayed I should add this code:

<body>
    <p id="test"></p>
</body>

However I've tried adding the javascript in the header (Tatsu header) and also tried adding it in the text block (HTML version) in different combinations and it never worked. Tried adding the script block before and after the body block, and also tried having it inside, before and after the display line.

If I try the following it works:

<body>
    <p>hello</p>
</body>

So I guess my problem is that I'm not setting the variable properly.

Can anyone help? Apologies if this is already solved somewhere, spent some hours and wasn't able to find it.

Thank you in advance.

N.J.Dawson · Accepted Answer · 2020-06-19 12:48:06Z

2

Your problem is the type of which you're using here:

<script type="javascript">

I noticed this whilst constructing an example of this problem.

javascript is not a correct mime type.

It should be text/javascript as per https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types

Please note this is not a complete list. Such as application/javascript also being valid. Please also see https://www.iana.org/assignments/media-types/media-types.xhtml

Working example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
    <p id="test">
      This shouldn't show up
    </p>
    <script type="text/javascript"> 
         console.log("####### JAVASCRIPT IS RUNNING ######")
         document.getElementById('test').innerHTML = 'hello';
    </script>
</body>
</html>

edited Jun 19, 2020 at 12:48

answered Jun 19, 2020 at 12:28

N.J.Dawson

1,38111 silver badges28 bronze badges

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

5 Comments

Clara Over a year ago

Thank you for your answer and the clarification on the "type". I changed it and still doesn't work. Tried copying and pasting your example and the output I get is: "This shouldn't show up" between two blank lines.

N.J.Dawson Over a year ago

@Clara have you ran the example here? If possible, could you update your answer with a snippet similar to the one I have posted? Within my answer the only changes were the addition of the text "this shouldn't show up" and the type change - how you're using these together may be where your error is.

Clara Over a year ago

Hi, if I try running your script here it returns the expected answer "hello", however when I copy and paste your code on my wordpress block (empty block and copying everything from the snippet) it returns "This shouldn't show up". Is it possible somehow the script is not running? Thanks a lot for your help

N.J.Dawson Over a year ago

Entirely possible. For us to diagnose further, we may need a link to your site, or the above example of how you're using it. I have added a console log to my example, if you copy my code again, open up developer tools and see that come out in the console, if you see "####### JAVASCRIPT IS RUNNING ######" then it'll confirm it's working or not.

Clara Over a year ago

Now it works! Not sure what changed, but is showing "hello" and in the console I see the "####### JAVASCRIPT IS RUNNING ######". Can't tell what I did wrong before. It really looks like the problem was the type. Thank you very much for your help!

Collectives™ on Stack Overflow

Wordpress: how to use javascript variables into html body

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related