ログイン

問題2 カラーピッカーで取得した色を反映させよう

JavaScriptの問題

JavaScript

カラーピッカーで取得した色を反映させよう

問題

カラーピッカーで取得した色を

「忍者CODE」に反映させよう!

自分の環境に書くコード

              <h1 class="title">忍者CODE</h1>
<input type="color" id="color-change">
¥HTML¥
            
              .title{
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;
    text-align: center;
    margin-top: 300px;
    font-size: 100px;
}
#color-change{
    display: block;
    margin: 0 auto;
    width: 100px;
}
¥CSS¥
            

期待する画面

ログインして解答を見る
コードのアイコン

解答ソースコード

              $(function(){
  $('#color-change').on("change", function(){
    let select_color = $(this).val();
    $('.title').css('color', select_color);
  });
});
¥JavaScript¥
            
              <!DOCTYPE html>
<html lang="">
<head>
	<meta charset="UTF-8">
	<title>タイトル</title>
	<link href="https://fonts.googleapis.com/css?family=Kosugi+Maru&display=swap" rel="stylesheet">
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
	<style>
		.title{
			font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;
			text-align: center;
			margin-top: 300px;
			font-size: 100px;
		}
		#color-change{
			display: block;
			margin: 0 auto;
			width: 100px;
		}
	</style>
</head>
<body>

	<h1 class="title">忍者CODE</h1>
	<input type="color" id="color-change">
	<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
</body>
</html>
¥HTML¥
            
答えのアイコン

解説

HTMLには様々な種類のinputがあるが、
基本的にはどのタイプも値を取得できるので覚えておこう!
値の取得は「.val()」を使えばOK!
完了にする!
1.JavaScriptでできること
続きの動画を見たい方は公式LINEから「JavaScript」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!