class名が同じliに、それぞれonmouseover属性を当てたい（onmouse時に実行）

前提・実現したいこと

前提
・li class=btnの背景色をjsで変更したいです。
・ul中のliは複数あり、すべてclass名は同じ指定をしています。
・現状、全てにonmouseoverがあるので、一つのliを選択すると最初のliにclass（btnColorChange）が追加される状態です。

実現したいこと
~~どれか一つのliをmouseoverした時に最初のliのみclassが追加される~~
→ mouseoverしたliのbackground-colorが変更されるようにしたいです。

HTML

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>Sample</title>
6  <link rel="stylesheet" href="style.css">
7  <script src="common.js"></script>
8</head>
9<body>
10  <ul>
11  <li class="btn" onmouseover="changeBackColor();">ホーム</li>
12  <li class="btn" onmouseover="changeBackColor();">アクセス</li>
13　<li class="btn" onmouseover="changeBackColor();">メニュー</li>
14  </ul>
15</body>
16</html>
17

js
1function changeBackColor(){
2  var elements = document.getElementsByClassName("btn");
3  document.querySelector('li').classList.add('btnColorChange');
4  for(i=0;i<elements.length;i++){
5    }
6}

css
1.btn{
2  display: inline-block;
3  padding: 0.5em 1em;
4  color: #000;
5  border-radius: 5px;
6  cursor: pointer;
7  border: 1px solid grey;
8  transition: 0.15s;
9}
10
11.btnColorChange{
12  background-color:yellow;
13}
14

試したこと

・jsにてliにthisを付与してonmouseoverしたliにのみ実行できるように試行しましたが上手くいきませんでした。

以下追記になります。
js初心者のため見当違いのことをしているかもしれません。

試行①　jsでselectされているliにthisを当てた

js
1function changeBackColor(){
2  var elements = document.getElementsByClassName("btn");
3  document.querySelector('li.this').classList.add('btnColorChange');
4  for(i=0;i<elements.length;i++){
5    }
6}

試行②　追加したいclass名にthisを当てた

js
1function changeBackColor(){
2  var elements = document.getElementsByClassName("btn");
3  document.querySelector('li').classList.add('btnColorChange.this');
4  for(i=0;i<elements.length;i++){
5    }
6}
7}

kei344

2020/02/02 08:41

試したコードを提示してください。

m.ts10806

2020/02/02 08:47

>jsにてliにthisを付与してこれでできると思ったのですけど、きちんと「自身」を参照するように組めてないだけだと思います。そのコードを提示してください。

mochigometarou

2020/02/02 09:06

追記致しました。試行は①②共にmouseoverしてもどこにも変化がない状態になるようでした。よろしくお願いします。

m.ts10806

2020/02/02 09:13

思ってたのと全然違った・・・。

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

回答1件

ベストアンサー

引数で自分自身(this)を渡せばいいでしょう。

html
1<ul>
2  <li class="btn" onmouseover="changeBackColor(this)">ホーム</li>
3  <li class="btn" onmouseover="changeBackColor(this)">アクセス</li>
4  <li class="btn" onmouseover="changeBackColor(this)">メニュー</li>
5</ul>

js
1function changeBackColor(e){
2  e.classList.add('btnColorChange');
3}

投稿2020/02/02 09:06

hatena19

総合スコア33715

mochigometarou

2020/02/02 09:09 編集

ありがとうございます。こちらで解決いたしました。引数について理解があまりなかったので、勉強になりました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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