addEventListenerがうまく使えない

前提・実現したいこと

初心者です。簡単なことかもしれませんが困ってしまったのでご教授お願い致します。
javascriptでIDをとって、マウスがのっかったときに色を変更したいのですが、変更できません。

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

addEventListener内の動きができない。

該当のソースコード

HTML
1<head>
2    <link rel="stylesheet" href="move_button.css">
3</head>
4<body>
5    
6        <div id="square">
7            <p>v(・ω・)v</p>
8        </div>
9  
10    <script type="text/javascript" src="move_button.js"></script>
11</body>

CSS
1#square{
2    width:7em;   
3    padding: 1em;
4    display:block;
5    background-color: rgb(199, 255, 255);
6    color: rgb(32, 24, 17);
7    font-weight: bold;
8    text-align:center;
9}

js
1var baseElement = document.getElementById('square');
2
3
4square.addEventListener('mouseover', function() {
5    
6    square.style.backgroundColor = 'Yellow';
7    //square.classList.add('square_hover');
8},fale);

試したこと

alaet使うと、addEventListenerの前に置くと表示できて中に入れると反応しなくなってしまいます。画像を動かす命令を入れたときはうまく動いたのですが、今回は動きません。

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

ここにより詳細な情報を記載してください。

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

回答2件

ベストアンサー

fale じゃなく false 。

Diff
1-},fale);
2+},false);

投稿2019/03/21 14:40

編集2019/03/21 14:40

kei344

総合スコア69400

mogumogu22

2019/03/21 14:51

修正したらできました！！単純なことで申し訳ないですが助かりました！ありがとうございました。

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

JavaScriptでスタイルの変更をするのは推奨されません。
CSSの擬似クラス（:hover）を使えば、#squereの上にマウスが乗ったとき、色を変更できます。

CSS
1#square{
2    width:7em;   
3    padding: 1em;
4    display:block;
5    background-color: rgb(199, 255, 255);
6    color: rgb(32, 24, 17);
7    font-weight: bold;
8    text-align:center;
9}
10#squere:hover {
11    color: yellow;
12}

投稿2019/03/21 02:54

Hideki0302

総合スコア41

Hideki0302

2019/03/21 02:58

あと、CSSの文法を気にしておいた方が良いですよ! 空白の入れ方が適当だと、分かりづらいCSSになるので... 頑張ってください!

mogumogu22

2019/03/21 11:44

回答ありがとうございます。本当はclassListを使ってクラスの追加や削除をしたいのですが、その前段階として、addEventListenerをつかってイベント発生時に動くかどうかを試すためにCSSをｊｓで直接変更今回はしていました。質問の仕方が良くなくてすみません。なので、出来ればaddEventListenerを使えるようになりたいのです。せっかくご回答いただいたのにすみません。CSSの文法気をつけるようにしますね！応援励みになります。ありがとうございます。

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

あなたの回答