if文を使った背景色を変える実装

前提・実現したいこと

ボタンクリック時に入力されている値を取得した後に、If文を使い以下のように背景色を変更する。

赤が入力されていたら：赤

青が入力されていたら：青

それ以外が入力されていたら：緑

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

背景色が変わらない。

コード
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
	<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
    <title>Document</title>
</head>
<style>
.example {
    display: block;
    margin-top: 100px;
    margin-left: 100px;
    text-align: left;
    }
.box {
 width: 500px;
 height: 500px;  
 background-color: gray;
}
</style>
<body>
   <div class="example">
        <input type="text" id="value">
        <input type="button" id="button" value="ボタン">
    </div>
        <div class="box" id="box1"></div>
</body>
<script src="index.js">
$(function(){
  $('#button').on("click", function () {
  var text = $('#value').val();
  if(text === '赤'){
  $('#box').css('background-color','#ff0000');
  }
  if(text === '青'){
  $('#box').css('background-color','#0000ff');
  }
  if(text === '緑'){
  $('#box').css('background-color','#008000');
  }   
});
});
</script>
</html>

maisumakun

2022/11/08 08:18

index.jsの内容はどのようなものでしょうか。

akha_8127

2022/11/08 08:21

ご返信ありがとうございます。 codeを保存するためのファイル名でそのファイルにJSのcodeを書いている状態です。

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

回答2件

javascript
1<style>
2.box {
3 width: 500px;
4 height: 500px;  
5 background-color: gray;
6}
7</style>
8<script>
9window.addEventListener('DOMContentLoaded', ()=>{
10  button.addEventListener('click',()=>{
11    const list = {"赤":"red","青":"blue","緑":"green"};
12    const color= list[value.value]??null;
13    box1.style.backgroundColor=color;
14  });
15});
16</script>
17<div class="example">
18     <input type="text" id="value">
19     <input type="button" id="button" value="ボタン">
20</div>
21<div class="box" id="box1"></div>

投稿2022/11/08 09:32

yambejp

総合スコア112734

ベストアンサー

誤字修正

単純にセレクターの誤字です。
#box → #box1

javascript
1$(function() {
2  $('#button').on("click", function() {
3    var text = $('#value').val();
4    if (text === '赤') {
5      $('#box1').css('background-color', '#ff0000'); // 修正
6    }
7    if (text === '青') {
8      $('#box1').css('background-color', '#0000ff'); // 修正
9    }
10    if (text === '緑') {
11      $('#box1').css('background-color', '#008000'); // 修正
12    }
13  });
14});

JS書く場所を一つに決める

↓これはおかしいです。

html
1<script src="index.js">
2$(function(){
3  $('#button').on("click", function () {
4  var text = $('#value').val();
5  if(text === '赤'){
6  $('#box').css('background-color','#ff0000');
7  }
8  if(text === '青'){
9  $('#box').css('background-color','#0000ff');
10  }
11  if(text === '緑'){
12  $('#box').css('background-color','#008000');
13  }   
14});
15});
16</script>

↓下記のうちいずれかにしてください。

html
1<!-- htmlの中にJSコードは書かない。index.jsの中にかく -->
2<script src="index.js"></script>
3
4<!-- または、htmlの中にJSを書くなら、srcでindex.jsを読み込むのをやめる -->
5<script>
6$(function(){
7  $('#button').on("click", function () {
8  var text = $('#value').val();
9  if(text === '赤'){
10  $('#box').css('background-color','#ff0000');
11  }
12  if(text === '青'){
13  $('#box').css('background-color','#0000ff');
14  }
15  if(text === '緑'){
16  $('#box').css('background-color','#008000');
17  }   
18});
19});
20</script>

おまけ

何度も$('#box1').css(...);と同じことを書いているのが気になったので、１つにまとめるようにしました。
赤青緑以外の色が指定されたらアラートを出すようにしてみました。

javascript
1$(function() {
2  $('#button').on("click", function() {
3    var text = $('#value').val();
4    
5    // カラーコードを選択
6    var color = {
7    	'赤': '#ff0000',
8      '青': '#0000ff',
9      '緑': '#008000'
10    }[text];
11    
12    // 該当する色がなかったら、アラートを出し、ここで処理を終了（以降は実行されない）
13    if (!color) {
14    	alert('そんな色ないよ');
15      return false;
16    }
17    
18    $('#box1').css('background-color', color);
19  });
20});