@TakuyaWatanabe (Takuya Watanabe)posted at 2021-01-26

$(this)

Q&A

Closed

解決したいこと

以下のように，$(this)をつかってボタンの色を変えたいです。
しかし，ボタンを押しても変化なしです。
idでの指定はうまくいくんですけど。。。
なぜでしょうか？

index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>イベント</title>
</head>
<body>
  <input type="button" id="btn1" value="ボタン" onclick="clickButton();"></input>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

script.js

function clickButton(){
    //$("#btn1").css('color','red');
    $(this).css('color','red');
}

1Answer

@monaka_ben_mezd posted at 2021-01-26

this がボタンの要素を指しているのはonclick=""の中だけです。
function clickButtonの中のthisは違うものを指しています。
なので以下のようにすると動きます

- onclick="clickButton();"
+ onclick="clickButton(this);"

- function clickButton(){
-     $(this).css('color','red');
+ function clickButton(elem){
+     $(elem).css('color','red');

2Like

Comments

@TakuyaWatanabe
Questioner
ありがとうございます。

Are you sure you want to delete the question?

$(this)

解決したいこと

1Answer

Comments

Your answer might help someone💌