前提・実現したいこと

Keydownイベントを動かす

発生している問題・エラーメッセージ

JavaScriptのdocument.onkeydown = keydown;が動きません

該当のソースコード

JavaScript
1<!--prize out-->
2<style>
3.text_center_game {
4text-align: center;
5background-color: #99cc00;
6}
7</style>
8<!--prizeout script-->
9<script>
10document.onkeydown = keydown;
11function keydown() {
12target = document.getElementById("prizeout");
13if (event.shiftKey == true) {
14target.innerHTML = "PRIZE OUT!";
15elm = document.createElement("audio");
16elm.src = "http://localhost/clane/online/prizeout.mp3";
17elm.type = "audio/mp3";
18elm.play();
19}
20else {
21target.innerHTML = "";
22}
23}
24</script>
25<!--maintenance script-->
26<script>
27document.onkeydown = keydown;
28function keydown() {
29target = document.getElementById("mente");
30if (event.ctrlKey == true) {
31target.innerHTML = "メンテナンスを行います";
32}
33else {
34target.innerHTML = "";
35}
36}
37</script>
38<font size="15" color="#ff0000">
39<div id="prizeout" class="text_center_game"></div>
40<div id="mente" class="text_center_game"></div>

試したこと

一つの<Script>では無く、2つの<script>でコードを書いた

補足情報（FW/ツールのバージョンなど）

localhost
宜しければご回答お願いします。

###もう一つ質問なのですが

僕はNotepad++を使って開発しているのですが、teratailのコードを見ると

javascript
1<div id="prizeout" class="text_center_game"></div>
2<div id="mente" class="text_center_game"></div>

Classの所だけ黒文字になっています。
何か不具合かコードの間違いなのでしょうか

退会済みユーザー

2020/03/27 07:31

webブラウザの開発ツールやデベロッパーツールでの、コンソールに、javascriptのエラーが報告されるものですが、そこには何も出ないのですか？

退会済みユーザー

2020/03/27 07:33

言語をJavascriptにしてHTMLを書かれたところで、カラー表示が意図したものと違う（太字になる）のは、言語の指定をHTMLにすればHTMLのカラー表示は直るんじゃないかと。HTML上に複数の言語（CSSやjsや）が混在できるので、それらも含めてきれいにカラー表示させるのをteratailに期待するのはコクかと。

退会済みユーザー

2020/03/27 07:33

出ないですね Notepad++を使用しております。

退会済みユーザー

2020/03/27 07:41

そのHTMLファイルは、file://～～じゃなく、http://localhost～～のURLで見てますよね？エディタからwebブラウザを呼び出すと前者のようになりがちなので、念の為確認。

退会済みユーザー

2020/03/27 07:47 編集

それと、HTML自体の文法エラーがあると、せっかくscript要素でjsを書いても無視されていることもありうるので、表示しているHTMLの文法チェックを先にやっておくと良いかも。 https://validator.w3.org/ webブラウザ上で表示中のHTMLソースを、全部コピーした上で、direct input に貼り付けて検査。

miyabi_pudding

2020/03/27 07:54 編集

OSはWindowsですか？macですか？キーイベント系処理は、OSによって挙動変わりますので。

退会済みユーザー

2020/03/27 07:57

windows8です

miyabi_pudding

2020/03/27 08:08

ありがとうございます。私の環境では、同じコードでごくごく普通に動くのですが、何がどう動かないのか教えてください。（多分質問者さんの意図した通りにはなってない）

kyoya0819

2020/03/27 08:18

> Classの所だけ黒文字になっています。 highlight.jsというコードの色分けをする外部JSライブラリの仕様です。

kyoya0819

2020/03/27 08:20

そもそもイベントが発生していないのですか？イベントの中の処理が動いてないのですか？これを確認するには、イベントの1番最初にalertやらconsoleやらを書けば、イベントが発生したかは確認可能です。

退会済みユーザー

2020/03/27 08:25

現在のコードだと、PEIZE OUT!の文字は背景が濃い緑色の赤文字で表示されます。ですが、もう一つ文字とtarget = document.getElementById("");を変更して作った「メンテナンスを行います」という表示がされません。同じEventが2度表示されない、と書けば伝わるのでしょうか

kyoya0819

2020/03/27 08:29

ということは1個目のイベントは発生するが、2個目が発生しないということですか？

miyabi_pudding

2020/03/27 08:29

「メンテナンスを行います」という文字列は、質問のコードには存在しませんが・・・。

退会済みユーザー

2020/03/27 08:31

本当ですねご指摘ありがとうございます。

退会済みユーザー

2020/03/27 08:32

>という事は1個目のイベントは発生するが、2個目が発生しないという事ですか？そういうことです。本文の詳細不足がありますので、詳しく追加します。

miyabi_pudding

2020/03/27 08:38

> そういうことです。であれば、私の回答で原因合ってそうですね。その先の実装をどうするかは、質問者さん自身が考えていかれるといいかと。

行動規範の内容に同意します

回答2件

様々突っ込みどころ満載ですが、ひとまず、JavaScriptの部分だけ。

ルートに同じ変数名で宣言のため、下のものしか生きてない

まずは、<script>の直下での様々な変数宣言などは、処理のルートに定義していくことになりますが、
それは、<script>要素を跨いでも、ルートはルートになります。
つまり、<script>を二つ並べ、同じ変数名でルートに宣言した場合、上のものを下のもので上書きされてしまいますので、質問者さんのコードは、下のものしか生きておりません。
両方機能させたいなら、各変数名を別名にしましょう。
というか、関数宣言は一個で、そのキーが何を押されたかによって判別、としないと、
今回の場合は、両方の処理を生かすことはできません。

コードブロックの使い方について

言語名がJavaScriptなのに、中のコードはHTMLになっているからです。
｀｀｀言語名
ここにコード
｀｀｀
という形式なので、コードがHTMLの場合は下記のようにすれば、
HTML用のカラーリングになります。
｀｀｀html
ここにコード
｀｀｀
今回の質問のコードはすべて、HTMLですので、合わせましょう。
JavaScriptのみにするなら、
<script>のような記載をせず、生のJSコードだと、正しいカラーリングになります。
｀｀｀javascript
const hoge = 25;
｀｀｀
って感じで。

さて、下記は質問には直接関係ないところですが、突っ込みです。

font要素は、廃止されており、今後使用するのは推奨できませんので使うのやめましょう。

あと、使ったとしても、インラインレベルの要素のため、divのブロックレベルを囲うような使い方はNGです。

インデントは使いましょう。

使わないと、自分とっても他の人にとっても、見づらくわかりにくくて最悪です。
コード修正をする時もわけわからないので、バグの温床となります。

以上です。

投稿2020/03/27 08:29

miyabi_pudding

総合スコア9555

onkyedown -> onkeydown Key のスペルミスじゃないんですかね？

投稿2020/03/27 06:17

退会済みユーザー

総合スコア0

退会済みユーザー

2020/03/27 06:19

あ、本文の間違いですねコードの方はkeyで書いています。

退会済みユーザー

2020/03/27 06:22

ところで、コードにはインデント使わないんですか？

退会済みユーザー

2020/03/27 06:24

使いません。

退会済みユーザー

2020/03/27 06:28

へー

退会済みユーザー

2020/03/27 06:30

コードの不具合についてはご回答いただけないでしょうか。宜しければお願いします。

m.ts10806

2020/03/27 08:25

インデントなしは不具合に等しいです。

kyoya0819

2020/03/27 08:44 編集

インデントはつけといて基本的に損はないのでつけた方が良いと思います。その方がほかの人からの印象良いですしね。エディタやIDEによりますけど、 Atomの場合はパッケージなしで Ctrl + A -> Ctrl + I で自動でインデントの補完をしてくれます。数秒で自動でインデントをつけてくれて、見やすいコードになるならやらない理由はないと思います。

行動規範の内容に同意します

あなたの回答