質問編集履歴

5 画像の追加

hemoglobin

hemoglobin score 4

2020/01/15 18:03  投稿

htmlにjavascriptが反応されない
teratail内で回答をいただき(https://teratail.com/questions/235141)、早速Atomを使ってhtmlとjavascriptに入れてみたのですが、反応がありません。
webで確認しても出てきませんでした。
JSFiddleとJS Binという2つのサイトで試すと反応しました。
AtomではLinter-ESLintを使って構文チェックをしています。
これ以外になにか必要なものはあるのでしょうか。
パソコンやAtom内の設定の問題でしょうか。
何が原因なのか分からないので教えていただきたいです。
![Atom](82b992411ae3abbfa7a6649e957dce59.png)
![JSFiddle](4aa0712c66bddcee805afde27b949e4c.png)
--追記3--
お二方様の回答で<script>をいれましたが反応がありませんでした。
javascriptにエラー文が出ていますが空白を入れたら直るものばかりでしたのでコードは空白を入れた以外何も触っていません。
変更した後のを貼ったほうが良いとのことでしたので、<script>を入れたhtmlとjavascriptを載せます。
```html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src=javascript/test2.js></script>
<title>demo</title>
</head>
<body>
<main>
 <p>ページを開いた日時: <span id="today"></span></p>
 <p>3週間後: <span id="after3weeks"></span></p>
 <p>3週間後が祝日ならその次の日: <span id="after3weeksIfHoliday"></span></p>
</main>
</body>
</html>
```
```javascript
const weekdays = ['日', '月', '火', '水', '木', '金', '土'];
// https://www8.cao.go.jp/chosei/shukujitsu/syukujitsu.csv
const holidaysCsvFromCabinetOffice = `国民の祝日・休日月日,国民の祝日・休日名称
2020/1/1,元日
2020/1/13,成人の日
2020/2/11,建国記念の日
2020/2/23,天皇誕生日
2020/2/24,休日
2020/3/20,春分の日
2020/4/29,昭和の日
2020/5/3,憲法記念日
2020/5/4,みどりの日
2020/5/5,こどもの日
2020/5/6,休日
2020/7/23,海の日
2020/7/24,スポーツの日
2020/8/10,山の日
2020/9/21,敬老の日
2020/9/22,秋分の日
2020/11/3,文化の日
2020/11/23,勤労感謝の日
`.split(/\r\n+/).map(row => row.split(',')[0]);
const now = Date.now();
const today = new Date(now);
const afterThreeWeek = new Date(now + 3 * 7 * 24 * 60 * 60 * 1000);
// 3週 * 7日 * 24時間 * 60分 * 60秒 * 1000ミリ秒
let ifHolidayDate = new Date(afterThreeWeek.getTime());
while (holidaysCsvFromCabinetOffice.indexOf(`${ifHolidayDate.getFullYear()}
/${ifHolidayDate.getMonth() + 1}/${ifHolidayDate.getDate()}`) !== -1) {
 ifHolidayDate = new Date(ifHolidayDate.getTime() + 24 * 60 * 60 * 1000);
}
document.getElementById('today').textContent = `${today.getFullYear()}
/${today.getMonth() + 1}/${today.getDate()} (${weekdays[today.getDay()]})`;
document.getElementById('after3weeks').textContent =
`${afterThreeWeek.getFullYear()}/${afterThreeWeek.getMonth() + 1}
/${afterThreeWeek.getDate()} (${weekdays[afterThreeWeek.getDay()]})`;
document.getElementById('after3weeksIfHoliday').textContent =
`${ifHolidayDate.getFullYear()}/${ifHolidayDate.getMonth() + 1}
/${ifHolidayDate.getDate()} (${weekdays[ifHolidayDate.getDay()]})`;
```
```
画像はjavascriptのエラー文です。
![イメージ説明](db2474875e0679c14db2223b4d2fc3db.png)
  • JavaScript

    25818 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    15260 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

4 追記

hemoglobin

hemoglobin score 4

2020/01/15 17:59  投稿

htmlにjavascriptが反応されない
teratail内で回答をいただき(https://teratail.com/questions/235141)、早速Atomを使ってhtmlとjavascriptに入れてみたのですが、反応がありません。
webで確認しても出てきませんでした。
JSFiddleとJS Binという2つのサイトで試すと反応しました。
AtomではLinter-ESLintを使って構文チェックをしています。
これ以外になにか必要なものはあるのでしょうか。
パソコンやAtom内の設定の問題でしょうか。
何が原因なのか分からないので教えていただきたいです。
![Atom](82b992411ae3abbfa7a6649e957dce59.png)
![JSFiddle](4aa0712c66bddcee805afde27b949e4c.png)
--追記--
お二方の回答で<script>をいれましたが反応がありませんでした。
htmlでもないとするとjavascriptで何か問題があるのでしょうか。
![イメージ説明](f4ffbb98b570fa1f58768485e0df859d.png)
```ここに言語を入力
--追記3--
お二方様の回答で<script>をいれましたが反応がありませんでした。
javascriptにエラー文が出ていますが空白を入れたら直るものばかりでしたのでコードは空白を入れた以外何も触っていません。
変更した後のを貼ったほうが良いとのことでしたので、<script>を入れたhtmlとjavascriptを載せます。
document.getElementById('today').textContent = `${today.getFullYear()}/${today.getMonth()+1}/${today.getDate()} (${weekdays[today.getDay()]})`;
document.getElementById('after3weeks').textContent = `${afterThreeWeek.getFullYear()}/${afterThreeWeek.getMonth()+1}/${afterThreeWeek.getDate()} (${weekdays[afterThreeWeek.getDay()]})`;
document.getElementById('after3weeksIfHoliday').textContent = `${ifHolidayDate.getFullYear()}/${ifHolidayDate.getMonth()+1}/${ifHolidayDate.getDate()} (${weekdays[ifHolidayDate.getDay()]})`;
```html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src=javascript/test2.js></script>
<title>demo</title>
</head>
<body>
<main>
 <p>ページを開いた日時: <span id="today"></span></p>
 <p>3週間後: <span id="after3weeks"></span></p>
 <p>3週間後が祝日ならその次の日: <span id="after3weeksIfHoliday"></span></p>
</main>
</body>
</html>
```
```
書かれているエラー文は大体同じで「required Space After Binary Operators:Operator + should not stick to preceding expression」が多いです。翻訳すると「二項演算子の後に必要なスペース:演算子+は前の表現に固執すべきではありません」ということみたいなのですが、正直何が原因なのかが全く分かりません。
こちらも教えていただけたらと思います。
```javascript
const weekdays = ['日', '月', '火', '水', '木', '金', '土'];
--追記2--
すみません、『()+1』を『() + 1』にするとエラーが消えました。
しかしエラー文を消しても何も反応がないままです。
// https://www8.cao.go.jp/chosei/shukujitsu/syukujitsu.csv
const holidaysCsvFromCabinetOffice = `国民の祝日・休日月日,国民の祝日・休日名称
2020/1/1,元日
2020/1/13,成人の日
2020/2/11,建国記念の日
2020/2/23,天皇誕生日
2020/2/24,休日
2020/3/20,春分の日
2020/4/29,昭和の日
2020/5/3,憲法記念日
2020/5/4,みどりの日
2020/5/5,こどもの日
2020/5/6,休日
2020/7/23,海の日
2020/7/24,スポーツの日
2020/8/10,山の日
2020/9/21,敬老の日
2020/9/22,秋分の日
2020/11/3,文化の日
2020/11/23,勤労感謝の日
`.split(/\r\n+/).map(row => row.split(',')[0]);
const now = Date.now();
const today = new Date(now);
const afterThreeWeek = new Date(now + 3 * 7 * 24 * 60 * 60 * 1000);
// 3週 * 7日 * 24時間 * 60分 * 60秒 * 1000ミリ秒
let ifHolidayDate = new Date(afterThreeWeek.getTime());
while (holidaysCsvFromCabinetOffice.indexOf(`${ifHolidayDate.getFullYear()}
/${ifHolidayDate.getMonth() + 1}/${ifHolidayDate.getDate()}`) !== -1) {
 ifHolidayDate = new Date(ifHolidayDate.getTime() + 24 * 60 * 60 * 1000);
}
document.getElementById('today').textContent = `${today.getFullYear()}
/${today.getMonth() + 1}/${today.getDate()} (${weekdays[today.getDay()]})`;
document.getElementById('after3weeks').textContent =
`${afterThreeWeek.getFullYear()}/${afterThreeWeek.getMonth() + 1}
/${afterThreeWeek.getDate()} (${weekdays[afterThreeWeek.getDay()]})`;
document.getElementById('after3weeksIfHoliday').textContent =
`${ifHolidayDate.getFullYear()}/${ifHolidayDate.getMonth() + 1}
/${ifHolidayDate.getDate()} (${weekdays[ifHolidayDate.getDay()]})`;
```
  • JavaScript

    25818 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    15260 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

3 追記

hemoglobin

hemoglobin score 4

2020/01/15 11:43  投稿

htmlにjavascriptが反応されない
teratail内で回答をいただき(https://teratail.com/questions/235141)、早速Atomを使ってhtmlとjavascriptに入れてみたのですが、反応がありません。
webで確認しても出てきませんでした。
JSFiddleとJS Binという2つのサイトで試すと反応しました。
AtomではLinter-ESLintを使って構文チェックをしています。
これ以外になにか必要なものはあるのでしょうか。
パソコンやAtom内の設定の問題でしょうか。
何が原因なのか分からないので教えていただきたいです。
![Atom](82b992411ae3abbfa7a6649e957dce59.png)
![JSFiddle](4aa0712c66bddcee805afde27b949e4c.png)
--追記--
お二方の回答で<script>をいれましたが反応がありませんでした。
htmlでもないとするとjavascriptで何か問題があるのでしょうか。
![イメージ説明](f4ffbb98b570fa1f58768485e0df859d.png)
```ここに言語を入力
document.getElementById('today').textContent = `${today.getFullYear()}/${today.getMonth()+1}/${today.getDate()} (${weekdays[today.getDay()]})`;
document.getElementById('after3weeks').textContent = `${afterThreeWeek.getFullYear()}/${afterThreeWeek.getMonth()+1}/${afterThreeWeek.getDate()} (${weekdays[afterThreeWeek.getDay()]})`;
document.getElementById('after3weeksIfHoliday').textContent = `${ifHolidayDate.getFullYear()}/${ifHolidayDate.getMonth()+1}/${ifHolidayDate.getDate()} (${weekdays[ifHolidayDate.getDay()]})`;
```
書かれているエラー文は大体同じで「required Space After Binary Operators:Operator + should not stick to preceding expression」が多いです。翻訳すると「二項演算子の後に必要なスペース:演算子+は前の表現に固執すべきではありません」ということみたいなのですが、正直何が原因なのかが全く分かりません。
こちらも教えていただけたらと思います。
こちらも教えていただけたらと思います。
--追記2--
すみません、『()+1』を『() + 1』にするとエラーが消えました。
しかしエラー文を消しても何も反応がないままです。
  • JavaScript

    25818 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    15260 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

2 追記

hemoglobin

hemoglobin score 4

2020/01/15 11:31  投稿

htmlにjavascriptが反応されない
teratail内で回答をいただき(https://teratail.com/questions/235141)、早速Atomを使ってhtmlとjavascriptに入れてみたのですが、反応がありません。
webで確認しても出てきませんでした。
JSFiddleとJS Binという2つのサイトで試すと反応しました。
AtomではLinter-ESLintを使って構文チェックをしています。
これ以外になにか必要なものはあるのでしょうか。
パソコンやAtom内の設定の問題でしょうか。
何が原因なのか分からないので教えていただきたいです。
![Atom](82b992411ae3abbfa7a6649e957dce59.png)
![JSFiddle](4aa0712c66bddcee805afde27b949e4c.png)
![JSFiddle](4aa0712c66bddcee805afde27b949e4c.png)
--追記--
お二方の回答で<script>をいれましたが反応がありませんでした。
htmlでもないとするとjavascriptで何か問題があるのでしょうか。
![イメージ説明](f4ffbb98b570fa1f58768485e0df859d.png)
```ここに言語を入力
document.getElementById('today').textContent = `${today.getFullYear()}/${today.getMonth()+1}/${today.getDate()} (${weekdays[today.getDay()]})`;
document.getElementById('after3weeks').textContent = `${afterThreeWeek.getFullYear()}/${afterThreeWeek.getMonth()+1}/${afterThreeWeek.getDate()} (${weekdays[afterThreeWeek.getDay()]})`;
document.getElementById('after3weeksIfHoliday').textContent = `${ifHolidayDate.getFullYear()}/${ifHolidayDate.getMonth()+1}/${ifHolidayDate.getDate()} (${weekdays[ifHolidayDate.getDay()]})`;
```
書かれているエラー文は大体同じで「required Space After Binary Operators:Operator + should not stick to preceding expression」が多いです。翻訳すると「二項演算子の後に必要なスペース:演算子+は前の表現に固執すべきではありません」ということみたいなのですが、正直何が原因なのかが全く分かりません。
こちらも教えていただけたらと思います。
  • JavaScript

    25818 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    15260 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1 文の修正

hemoglobin

hemoglobin score 4

2020/01/15 10:50  投稿

htmlにjavascriptが反応されない
teratail内で回答をいただき(https://teratail.com/questions/235141)、早速Atomを使ってhtmlとjavascriptに入れてみたのですが、反応がありません。
webで確認しても出てきませんでした。
JSFiddleとJS Binというサイトでは反応します
JSFiddleとJS Binという2つのサイトで試すと反応しました
AtomではLinter-ESLintを使って構文チェックをしています。
これ以外になにか必要なものはあるのでしょうか。
パソコンやAtom内の設定の問題でしょうか。
何が原因なのか分からないので教えていただきたいです。
![Atom](82b992411ae3abbfa7a6649e957dce59.png)
![JSFiddle](4aa0712c66bddcee805afde27b949e4c.png)
  • JavaScript

    25818 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    15260 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る