web-dev-qa-db-fra.com

Une variable JavaScript peut-elle être utilisée en HTML?

Ce que je veux dire, c’est qu’une variable/un tableau déclaré et initialisé peut être utilisé en HTML, en dehors des balises <script>-? Fx.

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

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

Comment accédez-vous à la variable/tableau dans ce cas? comme ça:

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

??

javascriptarraysvariables
13
Latze

Deux façons de le faire. C'est le meilleur:

<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>

Ou vous pouvez le faire de cette manière (ce qui, comme le souligne Marcel, ne fonctionne pas en XHTML et ne devrait en aucun cas être utilisé):

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

Vous pouvez faire quelque chose comme ça: 

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

où un élément a l'id spécifié:

<p id="para"></p>
5
Sarfraz

vous ne pouvez simplement pas accéder à une variable javascript en dehors de la balise script, c’est parce que, 

  1. Html ne reconnaît aucune variable, il rend simplement les éléments HTML supportés
  2. les variables sont utilisées pour stocker les variables temporaires, c'est-à-dire pour les données dynamiques, si vous voulez quelque chose de plus dynamique, vous pouvez utiliser PHP pour cela.
3
Ibrahim Azhar Armar

Inutile verbeusement, mais en utilisant des méthodes DOM standard.

<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>
1
Anthony

Vous pouvez même vous exprimer AngularJS.

<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>

Le code ci-dessus affichera "Je souhaite utiliser des variables directement en HTML avec: AngularJS" .Vous pouvez utiliser des accolades pour écrire une expression AngularJS. Par exemple: {{expression}}.

0
Mike

C'est la seule façon directe d'y accéder ailleurs dans votre page. En ouvrant une autre balise de script et en l’imprimant.

Vous pouvez également utiliser des méthodes telles que innerHTML pour placer la valeur quelque part.

0
dockeryZ

Je ne pense pas que vous puissiez accéder au javascript à partir de HTML, mais vous pouvez définir le innerhtml d'un objet dom via javascript afin que vous souhaitiez peut-être faire l'inverse. La première recherche google que j’ai trouvée, je ne peux donc pas promettre que c’est bien, mais elle contient un échantillon rapide.

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

0
David Daniel