Can a JavaScript variable be used in plain HTML?

What I mean is, can a variable/array declared and initialized be used in HTML, outside the <script>-tags? Fx.

<script type="text/javascript">
var foo = array('placeholder1', 'placeholder2');
</script>

<body>
<p><!--access the variable here-->foo[0]</p>
</body>

How do you access the variable/array in this case? like this:

<p><script type="text/javascript">document.print(foo[0])</script></p>

??

Answers:

Answer

Two ways to do this. This is the better one:

<script type="text/javascript">
// make sure to do this onLoad, for example jQuery's $()
var foo = array('placeholder1', 'placeholder2');
document.getElementById("fooHolder").innerHTML = foo.toString();
</script>
...
<p id="fooHolder"></p>

Or you could do it this way (which, as Marcel points out, doesn't work in XHTML and really shouldn't be used anyway):

<p><script type="text/javascript">document.write(foo)</script></p>
Answer

You can do something like this:

<script>
  var str = 'hello there';
  document.getElementById('para').innerHTML = str;
</script>

where an element has the specified id:

<p id="para"></p>
Answer

you simply cannot access javascript variable outside of the script tag, it is because,

  1. Html does not recognise any variable it just renders the supported HTML elements
  2. variables are used to store the temporary variables, that is for dynamic data, if you want something more dynamic then you can use PHP for that.
Answer

Unnecessarily verbose, but using standard DOM methods.

<script>
    window.onload = function(){
        // you do not need to initialize like this, but I like to
        var bar1 = new String('placeholder1');
        var bar2 = new String('placeholder2');
        var foo = new Array();

        // populate the Array with our Strings 
        foo.push(bar1);
        foo.push(bar2);

        // create an array containing all the p tags on the page 
        // (which is this case is only one, would be better to assign an id)
        pArray = document.getElementsByTagName('p');

        // create a text node in the document, this is the proper DOM method
        bar1TextNode = document.createTextNode(foo[0].toString());

        // append our new text node to the element in question
        pArray[0].appendChild(bar1TextNode);
    };
</script>

<body>
    <p></p>
</body>
Answer

That's the only direct way you'll access it elsewhere in your page. By opening another script tag and printing it.

You can also use methods such as innerHTML to put the value somewhere.

Answer

I don't think you can access the javascript from html but you can set the innerhtml of a dom object through javascript so you may want to go the other way around. First google search I found so I cant promise its good but it has a quick sample.

http://www.tizag.com/javascriptT/javascript-innerHTML.php

Answer

You can even you AngularJS expression.

<html>
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

     <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.framework= "AngularJS";
        });
    </script>

    <body>

        <div ng-app="myApp" ng-controller="myCtrl">
            <p>I want to use variables directly in HTML using: {{ framework }}</p>
        </div>

    </body>
</html>

The above code will print out "I want to use variables directly in HTML using: AngularJS".You can use braces to write AngularJS expression. For example: {{ expression }}.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.