前提
ここに質問の内容を詳しく書いてください。
この動画(https://youtu.be/fD8gm-DhjXk)のソースコード
自分のソースコード
海外のYouTube動画を見ながらJavaScriptでチェックボックス付きのパスワード生成システムを作っています。
チェックボックス機能を実装中に以下のエラーメッセージが発生しました。JavaScriptに詳しい方すみませんが、宜しくお願いします。リンクは以下に貼り付けています。18:55のところです。
https://youtu.be/fD8gm-DhjXk
実現したいこと
ここに実現したいことを箇条書きで書いてください。
- チェックボックス機能を動作するようにする
発生している問題・エラーメッセージ
エラーメッセージ ```Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') line22 ### 該当のソースコード ```script.js ソースコード ```const lengthSlider = document.querySelector(".pass-length input"), options = document.querySelectorAll(".option input"), generateBtn = document.querySelector("generate-btn"); const generatePassword = () => { let staticPassword = ""; options.forEach(option => { //looping through each option's checkbox if(option.checked) { console.log(option); } }); } const updateSlider = () => { //passing slider value as counter text document.querySelector(".pass-length span").innerText = lengthSlider.value; } updateSlider(); lengthSlider.addEventListener("input", updateSlider); generateBtn.addEventListener("click", generatePassword); ```style.css /* Import Google font - Poppins */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #4285F4; } .container{ width: 450px; background: #fff; border-radius: 8px; } .container h2{ font-weight: 600; font-size: 1.31rem; padding: 1rem 1.175rem; border-bottom: 1px solid #d4dbe5; } .wrapper{ margin: 1.25rem 1.75rem; } .wrapper .input-box{ position: relative; } .input-box input{ width: 100%; height: 53px; color: #000; background: none; font-size: 1.06rem; font-weight: 500; border-radius: 4px; border: 1px solid #aaa; padding: 0 2.85rem 0 1rem; } .input-box span{ position: absolute; right: 13px; cursor: pointer; line-height: 53px; color: #707070; } .wrapper .pass-indicator{ width: 100%; height: 4px; position: relative; background: #dfdfdf; margin-top: 0.75rem; border-radius: 25px; } .pass-indicator::before{ position: absolute; content: ""; height: 100%; width: 50%; border-radius: inherit; background: #f1c80b; } .wrapper .pass-length{ margin: 1.56rem 0 1.25rem; } .pass-length .details{ display: flex; justify-content: space-between; } .pass-length input{ width: 100%; height: 5px; } .pass-settings .options{ display: flex; list-style: none; flex-wrap: wrap; margin-top: 1rem; } .pass-settings .options .option{ display: flex; align-items: center; margin-bottom: 1rem; width: calc(100% / 2); } .options .option:first-child{ pointer-events: none; } .options .option:first-child input{ opacity: 0.7; } .options .option input{ height: 16px; width: 16px; cursor: pointer; } .options .option label{ cursor: pointer; padding: 0.63rem; } .wrapper .generate-btn{ width: 100%; color: #fff; border: none; outline: none; cursor: pointer; background: #4285F4; font-size: 1.06rem; padding: 0.94rem 0; border-radius: 5px; text-transform: uppercase; margin: 0.94rem 0 1.3rem; } ```index.html <!DOCTYPE html> <!-- Coding By Tak --> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>Password Generator JavaScript | Tak</title> <link rel="stylesheet" href="style.css"> <meta namae="viewport" content="width=device-width, initial-scale=1.0"> <!-- Google Icon Link for Icons --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"> <script src="script.js" defer></script> </head> <body> <div class="container"> <h2>Password Generator</h2> <div class="wrapper"> <div class="input-box"> <input type="text" value="e7_5y^BmArJ1o*WQ0Dx-y@~5s" disabled> <span class="material-symbols-rounded">copy_all</span> </div><!-- .input-box --> <div class="pass-indicator"></div><!-- .pass-indicator --> <div class="pass-length"> <div class="details"> <label class="title">Password Length</label> <span></span> </div><!-- .details --> <input type="range" min="1" max="30" value="15" step="1"> </div><!-- .pass-length --> <div class="pass-settings"> <label class="title">Password Settings</label> <ul class="options"> <li class="option"> <input type="checkbox" id="lowercase" checked> <label for="lowercase">Lowercase (a-z)</label> </li> <li class="option"> <input type="checkbox" id="uppercase"> <label for="uppercase">Uppercase (A-Z)</label> </li> <li class="option"> <input type="checkbox" id="numbers"> <label for="numbers">Numbers (0-9)</label> </li> <li class="option"> <input type="checkbox" id="symbols"> <label for="symbols">Symbols (!-$^+)</label> </li> <li class="option"> <input type="checkbox" id="exc-duplicate"> <label for="exc-duplicate">Exclude Duplicate</label> </li> <li class="option"> <input type="checkbox" id="spaces"> <label for="spaces">Include Spaces</label> </li> </ul> </div><!-- .pass-settings --> <button class="generate-btn">Generate Password</button> </div><!-- .wrapper --> </div><!-- .container --> </body> </html> ### 試したこと ここに問題に対して試したことを記載してください。 ソースコードを見直して最初から書き直すとまた今度は別のエラーが発生しました。 ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。