プログラムの理解が浅く恐縮ですが、以下のことを組み込みたいと考えています。計算をjavascriptの外部ファイルで行い、html内に反映させたいと考えています。 main.html内に直接jsを記述した場合は動くのですが、外部ファイル読込みにすると動きません。今後の管理の為にも計算のスクリプトは別ファイル読込にしたいと考えています。記述が違うのでしょうか？【main.html】は以下のように書いています。 $(function() { $("#test").load("test.html"); document.getElementById('zei').textContent = '価格' + total(100) + '円（税込）'; 【test.html】は以下のように書いています。 var total = function (price) { var tax = 0.1; return price + price * tax; } 以上となります。 htmlにjsをといった書き方をする事自体が間違っているのかもしれません。しかし、他のページでこのような書き方で外部ファイル読込をして動かしています。ご教示のほど、よろしくお願いいたします。

javascriptの外部ファイルで行い、html内に反映させたい

解決済

質問者：ma_0401
質問日時：2021/04/05 12:55
回答数：2件

プログラムの理解が浅く恐縮ですが、以下のことを組み込みたいと考えています。

計算を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>といった書き方をする事自体が間違っているのかもしれません。
しかし、他のページでこのような書き方で外部ファイル読込をして動かしています。

ご教示のほど、よろしくお願いいたします。

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2021/04/05 14:57

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;
＞}
だけの内容にしておく方が、何かと便利なのではないかと想像します。

- 0
- 件

通報する

この回答へのお礼

ご丁寧にご回答頂き、ありがとうございます。
拙い文章から不足や答えを見つけてくださり、ありがとうございました。

ーーーーーーーーーーーーーーーーーーーー
結果的に、現状の質問者様にとっては、
＞var total = function (price) {
＞var tax = 0.1;
＞return price + price * tax;
＞}
だけの内容にしておく方が、何かと便利なのではないかと想像します。
ーーーーーーーーーーーーーーーーーーーー

この通りで、別ファイルで動作しました。
とても助かりました。ありがとうございました。

通報する

お礼日時：2021/04/05 15:18

参考程度に

No.1

回答者： fujillin
回答日時：2021/04/05 13:13

こんにちは

通常、外部のjavascriptファイルを読み込む場合は、スクリプト部分だけを記述し、jsファイルとして読み込みます。
（ご提示のような方法もないことはないですけれど・・・）

「外部JSファイルを読み込んでみよう」
https://www.sejuku.net/blog/62452

https://developer.mozilla.org/ja/docs/Web/HTML/E …

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。

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;
}
];

度々の質問になってしまい恐縮ですが、ご教示いただけますと幸いです。