
プログラムの理解が浅く恐縮ですが、以下のことを組み込みたいと考えています。
計算をjavascriptの外部ファイルで行い、html内に反映させたいと考えています。
main.html内に直接jsを記述した場合は動くのですが、外部ファイル読込みにすると動きません。
今後の管理の為にも計算のスクリプトは別ファイル読込にしたいと考えています。
記述が違うのでしょうか?
【main.html】は以下のように書いています。
<!DOCTYPE html>
<head>
</head>
<body>
<script type="text/javascript">
$(function() {
$("#test").load("test.html");
</script>
<div id="test">
</div>
<p id="zei"></p>
<script>
document.getElementById('zei').textContent = '価格' + total(100) + '円(税込)';
</script>
</body>
</html>
【test.html】は以下のように書いています。
<script>
var total = function (price) {
var tax = 0.1;
return price + price * tax;
}
</script>
以上となります。
htmlにjsを<script></script>といった書き方をする事自体が間違っているのかもしれません。
しかし、他のページでこのような書き方で外部ファイル読込をして動かしています。
ご教示のほど、よろしくお願いいたします。
No.2ベストアンサー
- 回答日時:
No1です。
>test.jsは以下のような書き方で動くものでしょうか?
参考サイトをよく読んで(例えば、そのままをテストしてみるなど)、実行できることを確認してください。
また、スクリプトは簡単にテストできるので、動くか動かないかもすぐにわかるはずですよね?
とは言え、ご質問文のHTMLでは「$関数」の定義が行われていないようですので、補足でご提示のスクリプトを読み込ませた場合、$でエラーが発生するものと推測されます。
(実際には、ライブラリ等を事前に読み込んでいるのであれば別ですけれど…)
一方で、
>$(function() {
>var total = function (price) {
>var tax = 0.1;
>return price + price * tax;
>}
>];
は、内容として関数定義だけなので、直接に定義だけを記しても基本的には変わりはないはずですね。
(・・・と思ったら、その前に構文エラーも発生しますよ。(括弧の不整合))
また、そのままの場合は、関数 total は実際には呼び出せない(スコープ外から呼び出そうとしている)ことになると思われます。
(詳しく知りたい場合は「変数のスコープ」等について学習してください。)
結果的に、現状の質問者様にとっては、
>var total = function (price) {
>var tax = 0.1;
>return price + price * tax;
>}
だけの内容にしておく方が、何かと便利なのではないかと想像します。
ご丁寧にご回答頂き、ありがとうございます。
拙い文章から不足や答えを見つけてくださり、ありがとうございました。
ーーーーーーーーーーーーーーーーーーーー
結果的に、現状の質問者様にとっては、
>var total = function (price) {
>var tax = 0.1;
>return price + price * tax;
>}
だけの内容にしておく方が、何かと便利なのではないかと想像します。
ーーーーーーーーーーーーーーーーーーーー
この通りで、別ファイルで動作しました。
とても助かりました。ありがとうございました。
No.1
- 回答日時:
こんにちは
通常、外部のjavascriptファイルを読み込む場合は、スクリプト部分だけを記述し、jsファイルとして読み込みます。
(ご提示のような方法もないことはないですけれど・・・)
「外部JSファイルを読み込んでみよう」
https://www.sejuku.net/blog/62452
https://developer.mozilla.org/ja/docs/Web/HTML/E …
ご回答ありがとうございます。
jsファイルにして読み込む場合、
<script type="text/javascript">
$(function() {
$("#test").load("test.html");
</script>
<div id="test">
</div>
の個所を、
<script type="text/javascript" src="test.js"></script>
に書き換えたとして、test.jsは以下のような書き方で動くものでしょうか?
$(function() {
var total = function (price) {
var tax = 0.1;
return price + price * tax;
}
];
度々の質問になってしまい恐縮ですが、ご教示いただけますと幸いです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
cssにjavascriptを入れる?呼び...
-
IE8で外部jsファイルが読み込め...
-
別ファイルのfunctionの読み込み方
-
プルダウンメニューを別ファイ...
-
Dreamweaver で 外部JSを読み込...
-
【Google Apps Script】「ライ...
-
サーバー上でJqueryが使用できない
-
javascript内で外部ファイルを...
-
<a href="#" …>の意味を教えて...
-
スマホ上で、左右スワイプで次...
-
別ページのインラインフレーム...
-
初心者javascript ウィンドウサ...
-
【javascript クロスブラウザ...
-
javascriptでalertの文字列をコ...
-
Chromeがiframe内の「#~」に釣...
-
<HR>タグでつくる四角形につい...
-
JavaScriptからVBScriptの呼び...
-
ユーザーが更新ボタンを押さな...
-
SCRIPT5007: 未定義または NULL...
-
getElementsByNameで要素が取得...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
javascriptとApacheの設定
-
JavaScriptのエラー ( 関数の...
-
javascriptファイルは1つに統...
-
cssにjavascriptを入れる?呼び...
-
別ファイルのfunctionの読み込み方
-
【Google Apps Script】「ライ...
-
Dreamweaver で 外部JSを読み込...
-
初心者です。あまりに初歩的な...
-
このスクリプトを説明してください
-
外部JavaSqriptについて
-
呼出したjsファイル内で他jsフ...
-
外部ファイルの読み込みに失敗...
-
外部ファイル名を変数で指定で...
-
外部ファイル
-
外部ファイルを読み込ませるた...
-
レンタルサーバーでjavascript...
-
テンプレート適用でJavaが動かない
-
Yahoo!ウィジットでJavaScript
-
JavaScript内の関数を別のファ...
-
JavaScriptで最新ニュース5件を...
おすすめ情報