実現したいこと
ボタンクリック時に入力されている値を取得した後に以下のように背景色を変える。
下記formSubmit関数を用いること。
document.forms、onsubmitを使うこと。
入力条件
・１と入力されたら、赤色に背景変更
・２と入力されたら、緑色に背景変更
・３と入力されたら、青色に背景変更
・それ以外が入力されたら、「１、２、３のいずれかを入力してください」と赤文字で表示し、色をもとに戻す
JavaScriptを用いること
発生している問題・分からないこと
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
上記エラーコードが出ているのと、document.forms、onsubmitを用いて、背景色を変える仕組みを作りたいです。
該当のソースコード
html
1<!DOCTYPE html>2<html>3<head>4 <meta charset="UTF-8">5 <title>lesson05 入力フォーム</title>6 <link rel="stylesheet" type="text/css" href="base.css">7</head>8<body>9 <div id="wrapper">10 <form id="sampleForm" method="post" action="">11 <p class="error">1,2,3のいずれかを入力してください</p>12 <input type="text" name="text">13 <button type="submit" id="submit">送信</button>14 </form>15 <div id="box">box</div>16 </div><!-- wrapper -->17 18 <script>19 window.addEventListener('load', () => {20 21const form = document.getElementById('sample-form');22const input = document.getElementById('color-number');23const errorBox = document.getElementById('error-box');24const colorBox = document.getElementById('color-box');25 26const colorCode = {27 1: '#ff8888', // or 'red'28 2: '#88ff88', // or 'green'29 3: '#8888ff' // or 'blue'30};31 32function colorChanger() {33 if (Object.keys(colorCode).includes(input.value)) {34 colorBox.style.backgroundColor = colorCode[input.value];35 errorBox.classList.remove('on');36 }37 else {38 colorBox.style.backgroundColor = 'unset';39 errorBox.classList.add('on');40 }41}42 43form.addEventListener('submit', (event) => {44 event.preventDefault();45 colorChanger();46 return false;47});48});49 </script>50</body>51</html>52
CSS
1@charset "UTF-8";2/* reset */3body, h1, h2, h3, h4, h5, h6, p, address,4ul, ol, li, dl, dt, dd, img, form, table, tr, th, td {5 margin: 0;6 padding: 0;7 border: none;8 font-style: normal;9 font-weight: normal;10 font-size: 100%;11 text-align: left;12 list-style-type: none;13 border-collapse: collapse;14}15 16textarea { font-size: 100%; vertical-align:middle;}17img { border-style: none; display: block; }18hr { display: none; }19em{font-style: normal}20input{line-height:auto;vertical-align:middle;}21strong.more{color:#c30}22a{text-decoration: none;}23 24html {25 26}27 28body {29 font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;30}31 32* {33 -webkit-box-sizing: border-box;34 -moz-box-sizing: border-box;35 -o-box-sizing: border-box;36 -ms-box-sizing: border-box;37 box-sizing: border-box;38}39 40/* 上の部分は気にせずここから書く */41#sampleForm {42 margin: 20px 0 0 20px;43}44 45#box {46 margin: 20px 0 0 20px;47 width: 320px;48 height: 180px;49 background-color: #fdd;50}51 52.error {53 font-size: 12px;54 color: #f00;55 display: none;56}
試したこと・調べたこと
上記の詳細・結果
自分の打ったコードでは、form値がnullになっていることから、エラーが発生していると考えているのですが、条件に合った、コードを用いて、背景色を変える方法があればご教授いただきたいです。
また、自分が作ったコードの悪いところ等あればご教授ください。
補足
特になし
0 コメント