質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

268閲覧

onclickの実行について

gunjo2000

総合スコア12

JavaScript

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/06/09 11:34

Javascriptの勉強をしています。
onclickのコードを実装したいのですが、うまくいきません。

https://techacademy.jp/magazine/15062
こちらのサイトを参考にコードを書いてchrome上でindex.htmlを開き、
表示されたブロックをクリックしてみても、反応がない状況です。
他のコードにてcssとjavascriptが適用されるのは確認済のため、
ファイル名や階層が間違っている可能性は考えづらいです。

何か間違っている点や気になる点がありましたら、ご教授ください。
また、teratailでの質問は初めてなもので、
失礼な点がありましたらそちらも教えていただけるとありがたいです。
よろしくお願いいたします。

ソースコードは以下となっています。

html

1<!doctype html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>通知</title> 6 <link rel="stylesheet" type="text/css" href="css/stylesheet.css"> 7 <script type="text/javascript" src="JS/script.js"></script> 8 </head> 9 <body> 10 <div id="text-button"><p id="text">クリック</p> 11 </body> 12</html>

css

1#text-button { 2 display: block; 3 cursor: pointer; 4 width: 160px; 5 text-align: center; 6 border: 1px solid #232323; 7}

javascript

1document.getElementById("text-button").onclick = function() { 2 document.getElementById("text").innerHTML = "クリックされた!"; 3};

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

<div>タグが閉じられていないように見えるのですが、そちら閉じてもうまくいきませんか? ```html <div id="text-button"><p id="text">クリック</p> ↓ <div id="text-button"><p id="text">クリック</p></div> ```

投稿2019/06/09 11:40

fumito_94

総合スコア679

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gunjo2000

2019/06/09 12:02

すみません、何故かここへコピペする際に</div>が抜けてしまったようで、 実際には閉じてあったので関係はないかと思われます。
fumito_94

2019/06/09 12:08

JSのパスはあっていますでしょうか? windowが開かれたらconsole.log()するなどをして試してみるとわかると思います。 大文字になっていたで、そこを一度確認してみてもいいかもしれないです!
gunjo2000

2019/06/09 12:24

ありがとうございます。 コンソールで確認しようと検証を開いてみたところ、 パスは大丈夫そうでしたが以下のようなエラーが出ていました。 これは一体・・・ script.js:10 Uncaught TypeError: Cannot set property 'onclick' of null at script.js:10
gunjo2000

2019/06/09 12:32

自己解決しました。 おそらくJSの読込順が原因でした。 <script type="text/javascript" src="JS/script.js"></script> を<body>タグの最後に持ってきたところ、うまく動作しました。 お付き合いいただきありがとうございました!
fumito_94

2019/06/09 12:34 編集

こちら他にもJSファイルに記載されているのでしょうか? もしされているのであれば全文載せていただきたいです。
gunjo2000

2019/06/09 12:40

いえ、上にあるのが全文です。 10行目とあるのは、コメントアウトしている箇所があるせいですね。
fumito_94

2019/06/09 12:45

document.getElementById("text-button")こちらが値を取得できていないみたいですね 呼び出されるタイミングの問題だと思われます。 scriptを呼び出すタイミングをtext-buttonなどの定義後に書くとうまくいくと思います。
fumito_94

2019/06/09 12:51

jsでonloadをしたらできると思うので、こちらに書くとコードが見にくいので新しく回答として書きますね。
fumito_94

2019/06/09 12:55

回答に書いたやり方だと、Script定義の場所を変えなくてもうまくいくはずです。
guest

0

こちらのように、ページがロードされたらJSの処理を読み込むようにするとエラーなく動くと思いますよ
onload

js

1window.onload = function () { 2 document.getElementById("text-button").onclick = function() { 3 document.getElementById("text").innerHTML = "クリックされた!"; 4 }; 5};

投稿2019/06/09 12:54

fumito_94

総合スコア679

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gunjo2000

2019/06/09 13:15

なるほど。そういう方法もあるのですね。 おっしゃる通り実装したところ、うまくいきました。 また、script定義の場所を変えることでもうまくいくことを確認しました。 勉強になりました。ありがとうございました!
fumito_94

2019/06/09 13:17

よかったです! すぐに答えを提供できずすみませんでした…! 頑張ってください!
guest

0

別の方法があります。

js

1document.getElementById("text-button").on("click", function() { 2 document.getElementById("text").innerHTML = "クリックされた!"; 3});

でどうでしょうか。
ちなみに、onaddEventListenerの略です。

投稿2019/06/09 11:39

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2019/06/09 11:54

jQueryと勘違いしていませんか?
gunjo2000

2019/06/09 12:04

この表記に変えてみましたが、特に変化はありませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問