JavaScripty変数をHTMLで利用

締切済

質問者：urotsuta987
質問日時：2013/12/31 14:51
回答数：4件

御教示くださいませ。

JavaScriptで作成した変数をHTML内で利用したいと思います。
HTML内での利用の際、document.writeや、getElementByIdなどは利用しない方法がないかと
模索しております。

以下が実装したい例です。
※一部記載省略
------------------
<script>
var yourname = "山田";
var param = "abc";
</script>
<body>
あたなの名前は●です。
<a href="./index.php?room=■">コチラ</a>から。
</body>
------------------
●には山田、
■にはabc
と表示させたいと考えております。

お忙しいところ申し訳ありませんが、御教示のほどお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： Ogre7077
回答日時：2014/01/10 12:27

JavaScript変数は JavaScript でしか使えないので、

せめてテンプレートっぽく記述しては如何でしょう。

<script>(function(){

// 変数の定義
var templeVars = {
yourName: [ 'textContent', "山田"],
param: [ 'href', "abc"],
};

addEventListener('load', function(ev){

// テンプレXXXを変数の内容に置換
for (i in templeVars) {
var d = templeVars[i], s = document.getElementById(i);
s[d[0]] = s[d[0]].replace('XXX', d[1]);
}

}, false);

})()</script>

<body>

あなたの名前は<span id=yourName>XXX</span>です。
<a href="./index.php?room=XXX" id=param>コチラ</a>から。

- 0
- 件

通報する

No.3

回答者： sabinekonya
回答日時：2014/01/03 03:04

WPFでいうところのデータバインドをHTMLでも実現させたいということでよろしいでしょうか？

でしたら、jQuery Templateを使えば似たようなことができます

<script>
$('#tmpl_info').tmpl({ name: '山田',param: 'abc' }).appendTo('#main');
</script>
<script id="tmpl_info" type="text/x-jquery-tmpl">
あたなの名前は${name}です。
<a href="./index.php?room=${param}">コチラ</a>から。
</script>
<body id="main">
</body>