2017-02-28 17 views
0

私は自分の文書のJavaScript部分で作成した変数を、指定された文書の外で使用しようとしています。このように:JavaScriptとHTMLで同じ変数を使用する

<script> 
var Number = 1; 
var Number2 = 2; 
var Result = Number 1 + 2; 
</script> 

<p> Result </p> 

具体的には、スクリプトで作成した変数を表に使用したいと思います。このように:

テーブルに新しいスクリプト領域をマークしてみましたが、これはうまくいかないようです。私はあなたが私の問題の基本的な概念を得ることができることを願っています。

さらに:私はHTMLとJavaScriptでいくつかのグローバル変数を作成するかもしれないと思っていましたが、どうすればよいかわかりません。

+0

1つの方法は、document.write(Result)を使用することです。しかし、他の方法もあります。 – mehulmpt

+0

これは、ウェブプログラミングのほとんどのイントロでカバーされています。最も簡単な方法は 'element.textContent = Result;'を使って結果を特定の要素に配置することです。 –

+0

NumberはビルトインのJavascript型であり、置換したくない場合 –

答えて

0

Id 'のようなものをお勧めします。 innerHTMLメソッドを使用すると、選択した要素のHTMLを設定できます。私は、細胞にIDを与えて、何が標的にされているかをより簡単に特定した。

<body> 
 

 
<table class="tabelle"> 
 
    <tr> 
 
    <td id='result-cell'></td> 
 
    <td>Text</td> 
 
    <td>Text</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Text</td> 
 
    <td>Text</td> 
 
    <td>Text</td> 
 
    </tr> 
 
</table> 
 

 
<script> 
 
var num1 = 1; 
 
var num2 = 2; 
 
var result = num1 + num2; 
 
document.getElementById('result-cell').innerHTML = '<p>' + result + '</p>'; 
 
</script> 
 

 
</body>

+0

このスクリプトは基本的には完璧ですが、私の場合、関数funktionは行を追加するときに機能しなくなります: 'code'document.getElementById( 'result-セル ')。innerHTML ='

'+結果+'

';コードに私のvariabeの "結果"は、スクリプトがロードされている間に変化する数字であるという事実との関連があります。 – AlcaTEC

+0

セルにIDを渡すことを忘れてしまった場合は、その結果varが定義されているものと同じ名前になっていることを確認し、最後にtdの中からスクリプトタグを削除してください。更新する必要はありません。更新のためにイベントハンドラを追加する方が良いでしょう。 –

0

あなたのHTMLは、変数としてResultを認識しません! DOMは、Resultが単なるテキストであると仮定してレンダリングされます。

2つのあなたがその変数をレンダリングするために、あなたの視野を得ることができる方法があります:セクションで

  1. は、Javascriptがで行くとDOMを変更するための命令を含みます。それはのようなものを見てみましょう:あなたは結果値を書きたいところセレクタがある

...(your code)... resultElement = document.querySelector('p.result'); resultElement.innerHTML = result;

。あなたのコードはresultに値を与えます。これらの次の行は、あなたが好きなDOM要素にテキストとしてそれを挿入することで、その値をDOMに書き込んで書き込みます。

  1. Handlebars.jsのようなテンプレートエンジンを使用してください。このアプローチは、設定が複雑ですが、非常に自然にブラケットを使用してテンプレートにあなたの変数を書き込むことができるようになる:

スクリプト:var result = 'Howdy!'

テンプレート:小規模なプロジェクトのために<p> {{result}} </p>

、第1のアプローチがおそらく最も適切であろう。

関連する問題