web-dev-qa-db-ja.com

JavaScript変数をプレーンHTMLで使用できますか？

つまり、宣言および初期化された変数/配列を、<script>タグの外でHTMLで使用できますか？ Fx。

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

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

この場合、変数/配列にどのようにアクセスしますか？このような：

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

??

javascriptarraysvariables
15
Latze

これを行うには2つの方法があります。これはより良いものです：

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

または、次の方法で行うこともできます（Marcelが指摘するように、XHTMLでは機能せず、実際には使用しないでください）。

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

あなたはこのようなことをすることができます：

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

ここで、要素には指定されたIDがあります。

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

スクリプトタグの外ではjavascript変数にアクセスできないだけです。それは、

  1. HTMLは、サポートされているHTML要素をレンダリングするだけの変数を認識しません。
  2. 変数は、一時的な変数を格納するために使用されます。つまり、動的データ用です。より動的なものが必要な場合は、PHPを使用できます。
3
Ibrahim Azhar Armar

不必要に冗長ですが、標準のDOMメソッドを使用します。

<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

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>

上記のコードは、「HTMLで変数を直接使用したい：AngularJS」を出力します。中かっこを使用してAngularJS式を記述できます。例：{{式}}。

0
Mike

これが、ページの他の場所からアクセスする唯一の直接的な方法です。別のスクリプトタグを開いて印刷する。

InnerHTMLなどのメソッドを使用して、値をどこかに置くこともできます。

0
dockeryZ

私はあなたがhtmlからjavascriptにアクセスできるとは思いませんが、あなたはjavascriptを通してdomオブジェクトのinnerhtmlを設定することができますので、あなたは逆に行きたいかもしれません。私が最初に見つけたgoogle searchは、その良い約束はできませんが、簡単なサンプルがあります。

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

0
David Daniel