チェックボックスでonchangeを使いたい。

初心者のため、コードの書き方がまだまだです。チェックボックスにチェックすることで、クラスを変更したいのですが、なぜonchangeがうまくいかないのかわかりません。

main.js:1 Uncaught ReferenceError: $ is not defined

VM1151 index.html:9 Uncaught ReferenceError: change is not defined
at HTMLInputElement.onchange

原因が分かる方どうかお願いします。

ひとつめの、Uncaught ReferenceError: $ is not definedはjQueryを読み込んだら出なくなったのですが、なぜでしょうか？jQueryは使ってないと思うのですが、、

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div id="box" class="unchecked">
    <input type="checkbox" id="checkbox" onchange="change()" >入力内容に間違いがないことを確認しました。
  </div>
  <script src="js/main.js"></script>
</body>
</html>

(function() {
'use strict';
  var isChecked = document.getElementById('checkbox').checked;
  var checkbox = document.getElementById('checkbox');
  var box = document.getElementById('box');
  var checked = document.getElementsByClassName('checked');
  var unchecked = document.getElementsByClassName('unchecked');

  function change() {
    if (isChecked == true) {
      box.classList.add('checked');
      box.classList.remove('unchecked');
    }
    if (isChecked == false) {
      box.classList.remove('checked');
      box.classList.add('unchecked');
    }
  }

})();

#box {
  background: #F2C879;
  padding: 5px;
  border-radius: 10px;
  width: 350px;
  text-align: center;
  margin: 10px auto;
}
.unchecked {
  border: red solid 2px;
  color: #666666;
}
.checked {
border: #E87D0D solid 2px;
color: black;
}

m.ts10806

2019/07/09 21:26

「うまくいかない」では他者には何も伝わりませんので、現象を具体的に記載してください。そもそもchangeが実行されているのかとか(デバッグしてください)

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

回答2件

main.js:1 Uncaught ReferenceError: $ is not defined

提示コードそのまま実行したのですが、こちらの手元では出ていません。
実際のコードでは$(function() {となっていたとかではないですか？

いずれにしても今回のケースでは即時間数は不要に思います。
チェックの状態も「onchange」のときに変わっているかどうかをようやく確認できるので、
changeしたあとに取得しないと意味がありません。

とりあえず動かすだけなら下記だけで良いのではと。

js
1  function change() {
2  	var isChecked = document.getElementById('checkbox').checked;
3  	var checkbox = document.getElementById('checkbox');
4  	var box = document.getElementById('box');
5  	var checked = document.getElementsByClassName('checked');
6  	var unchecked = document.getElementsByClassName('unchecked');
7
8  	if (isChecked == true) {
9  		box.classList.add('checked');
10  		box.classList.remove('unchecked');
11  	}
12  	if (isChecked == false) {
13  		box.classList.remove('checked');
14  		box.classList.add('unchecked');
15  	}
16  }
17

投稿2019/07/10 00:18

m.ts10806

総合スコア80890

neginattofan

2019/07/10 04:31

無事に動くことができました。様々なご指摘ありがとうございます。以後気を付けていきます。

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

ベストアンサー

var checked = document.getElementsByClassName('checked');
var unchecked = document.getElementsByClassName('unchecked');

が、どこからも参照されていないので不要？
どのブラウザまで動作対象にしたいかによりますが以下で

javascript
1'use strict';
2window.addEventListener('DOMContentLoaded',()=>{
3  document.querySelector('#checkbox').addEventListener('change',e=>{
4    var checkbox = e.target;
5    var isChecked = checkbox.checked;
6    var box = document.querySelector('#box');
7    var checked = document.querySelectorAll('.checked');
8    var unchecked = document.querySelectorAll('.unchecked');
9    box.classList.toggle('checked',isChecked);
10    box.classList.toggle('unchecked',!isChecked);
11  });
12});