2010-08-10 12 views
9

Lo que quiero decir es, ¿se puede usar una variable/matriz declarada e inicializada en HTML, fuera de las etiquetas <script>? Fx.¿Se puede usar una variable de JavaScript en HTML simple?

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

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

¿Cómo se accede a la variable/matriz en este caso? de esta manera:

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

??

Respuesta

15

Dos formas de hacerlo. Este es el mejor uno:

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

O bien, podría hacerlo de esta manera (que, como señala Marcel, no funciona en XHTML y realmente no debe ser utilizado de todos modos):

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

'document.write' no funciona en XHTML: http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite –

+0

Este es un buen ejemplo de establecer una etiqueta HTML para contener una variable de JavaScript contenido. Pero no le permite especificar una variable de JavaScript en HTML que devuelve automáticamente el contenido de una variable de JavaScript. La respuesta correcta es que lo que se pide no se puede hacer, pero aquí hay un enfoque alternativo. –

3

puede hacer algo como esto:

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

donde un elemento tiene el id especificado:

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

Esa es la única manera directa de acceder a ella en otro lugar de su página. Al abrir otra etiqueta de script e imprimirla.

También puede usar métodos como innerHTML para poner el valor en alguna parte.

0

No creo que pueda acceder al javascript desde html, pero puede establecer el innerhtml de un objeto dom a través de javascript, por lo que es posible que desee ir al revés. Primero encontré la búsqueda de Google, así que no puedo prometer que sea buena, pero tiene una muestra rápida.

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

3

simplemente no pueden acceder a javascript fuera variable de la etiqueta de script, es porque,

  1. HTML no reconoce ninguna variable que sólo representa los elementos HTML admitidas se utilizan
  2. las variables para almacenar las variables temporales, es decir, para datos dinámicos, si quiere algo más dinámico, entonces puede usar PHP para eso.
1

Innecesariamente detallado, pero utilizando métodos DOM estándar.

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

Incluso puede expresar 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> 

El código anterior se imprimirá "Quiero utilizar variables directamente en HTML usando: AngularJS" Usted puede utilizar llaves para escribir AngularJS expresión. Por ejemplo: {{expression}}.

Cuestiones relacionadas