Q&A
main.jsが読み込まれていないということはないでしょうか?
HTML内の要素にJavaScriptで動作等をつけたいのですが上手くできません。コードを間違えているのか、文法的に間違えているのかもよくわかりません。Javaのコードで『document.getElementById』と『btn.addEventListener』の部分が何度やっても上手くいかないのはなぜでしょうか？
HTML
1```<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>おみくじ</title> 6 <link rel="stylesheet" href="css/styls.css"> 7 </head> 8 <body> 9 <div id="btn">?</div> 10 <script src="js/main.js"></script> 11 </body> 12</html> 13 14```JavaScript 15
(function() {
'use strict';
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
this.textContent = 'hit!';
});
btn.addEventListener('mousedown', function() {
this.className = 'pushed';
});
btn.addEventListener('mouseup', function() {
this.className = '';
});
})();
ご質問ありがとうございます。
main.js自体が読み込まれていない訳ではありません。しかし、clickされたらpushedされるはずがされなかったりとコードに書いた内容が反映されていないということです。
わかりづらく申し訳ございません。
chromeをお使いでしたらdevtoolsを開き(F12キーを押して)Elementsタブでhtmlの状態が確認できると思います。
その状態でdivをクリックするとdivのclassに"pushed"が追加されることが確認できると思います。
>clickされたらpushedされるはず
ちょっと意味がわかりませんが、そのjs自体、
html上の「?」マークを
1.クリックしたら「hit!」に置き換える→OK
2.マウスが押されたら、そのクラス名を「pushed」にする→OKと思われる
3.マウスが離されたら、そのクラス名を「」(消す？)にする→OKと思われる
っていうコーディングです。そういう意味では普通に動いているのではないかと。
一応、それぞれconsole.log('hoge')で確認したら正常に通過していますね。
(ただし、2と3は、クリックとほぼ一緒に起きてしまうので、詳細の確認はとれませんが。)
ただ、何をしたいのかは不明なので、これ以上なんとも言えません。
タイトルは質問内容に寄せた要件のみ記載してください(タイトルだけで聞きたいことがわかるのが理想)
今のタイトルだとなんのことかわかりませんので。
質問は編集できるので適宜ご対応ください。
ちなみにJavaとJavaScriptは全然別の言語ですのでお間違えなく。
『上手くいかない』とは具体的には何が起きていますか？ エラーが出ているならエラーメッセージをご提示ください。
みなさん、ご回答ありがとうございます。
devtoolsを開いたところ問題がありませんでした。"pushed"をcss内で上手く定義されていなかったようで上手く動きませんでしたが解決いたしました。
ありがとうございました。
質問は編集できるので適宜ご対応ください。
他、様々指摘を受けているわけですが、全く無反応で何も対応される雰囲気もなく、具体的な解決法方を書かずに自己解決は印象悪すぎます。今後まともに回答得られると思わない方が良いですよ(ﾆｯｺﾘ
mts10806さん
私の対応でご気分を害されたようでしたら申し訳ございませんでした。
私としてはmts10806さんの１つ前のコメントで全ての方への感謝を伝えようとしましたがうまく伝えられてなかったようですね。
もう少しteratailの使い方をちゃんと理解したほうがいいのだなと感じました。
ご指摘ありがとうございました。
「初めから、起きている問題をきちんと書いていただければ話が早かったのに」とは思いましたが、初心者の方はみなさん、今回のように、問題を整理すれば自然に解決してしまうような質問なので、まあお気になさらず。
逆に言うと、ちゃんとした質問ができる人はすでに初心者ではないのだと思いますよ。
コメントありがとうございます。
おっしゃる通りで問題自体は整理するとすぐに解決できてしまいました。
なにがわからなくてどのようなエラーが出ているのかをできる限りわかりやすく質問できるようにしたいと存じます。
指摘を全て拾うのは難しいかとは思いますが、「質問内容からしか他人は汲み取ることができない」ので、ここは「追記修正依頼」のコメント欄ですし、質問を編集して返すというのが本来の使い方です(デフォルト非表示なので要件がコメントで書かれてた場合、あとからきた別の人が拾うのは結構難しいです)
追加修正依頼の本来の使い方について詳しく理解することができました。
ありがとうございます。
あとからきた方にもわかりやすい質問及び追加修正依頼をしたいと思います。
ご対応ありがとうございます。細かい指摘失礼しました。
こちらこそご丁寧に説明してくださりありがとうございました。
回答1件
0
自己解決
devtoolsを開いたところ問題がありませんでした。"pushed"をcss内で上手く定義されていなかったようで上手く動きませんでしたが解決いたしました。
投稿2019/02/16 02:51
総合スコア30
個人的には、「開発者ツールを開いて属性を確認する」という解決法が記述されており、今回の問題の自己解決としては過不足ない内容だと感じましたので、高評価しました。
つまづいていた問題が稚拙であることと、自己解決の回答が適切であるか否かについて、それぞれ独立であると考えます。
ありがとうございます。
つまづいていた問題はかなり稚拙だったと私自身感じております。これからもっと理解を深めていきたいと思います。
質問/回答ともに「具体性が足りていない」「解決した結果を書いていない」のが低評価の理由と思います。
具体的には「CSSコードが明示されていない」「CSS指定が反映されない事が質問文で明示されていない」「回答内容の『上手く定義されていなかった』が抽象的」「解決結果を書いていない」
おそらく、解決するのでしょうが、途中経過がいろいろと抜けています。
[質問]
JavaScriptで指定したclick,mousedown,mouseupイベント発生後のclass属性値を変更しても、CSS指定の～というデザインorレイアウト設定が反映されません。HTML/CSS/JavaScriptコードは下記です。
[回答]
devtoolsを確認したところ、CSSのセレクタで「pushed {}」の記述が誤っており、反映されていませんでした。「.pushed {}」 に修正したところ、反映されました。
コメントありがとうございます。
ご指摘のようにHTMLとjavascriptだけでなくCSSについてもっと詳しく書くべきでした。実際に問題はCSSにあったわけですし……
具体例を参考に次回からは具体的かつ必要な情報をすべて書いてある質問を作りたいと思います。
一応。
回答も編集できますよ。
あなたの回答
tips
プレビュー
