前提・実現したいこと
ここに質問の内容を詳しく書いてください。。
■javascriptでhtmlのテキストコンテントを変更しようとしたら以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
Uncaught TypeError: Cannot set property 'textContent' of nul
該当のソースコード
html <!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"> <title>Document</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div class="record">残り2000ml</div> <div class="btn">接種する</div> <div id="select" class='hidden'> <ul> <li>接種する量を選択してください</li> <li id="200">200ml</li> <li id="500">500ml</li> </ul> </div> <script src="js/main.js"></script> </body> </html>
javascript
1'use strict'; 2{ 3const record = document.querySelector('.record'); 4const btn = document.querySelector('.btn'); 5 6const select = document.getElementById('select'); 7const oneT = document.getElementById('200'); 8const oneF = document.getElementById('500'); 9 10let remain = 2000; 11 12btn.addEventListener('click',()=>{ 13 select.classList.remove('hidden') 14}) 15 16oneT.addEventListener('click',()=>{ 17 remain-= 200; 18 //ここでエラー発生 19 record.textContent = `残り${remain}MLです`; 20 select.classList.add('hidden') 21}) 22 23oneF.addEventListener('click',()=>{ 24 remain-=500; 25 //ここでエラー発生 26 record.textContent = `残り${remain}MLです`; 27 select.classList.add('hidden') 28}) 29} 30
試したこと
ここに問題に対して試したことを記載してください。
スペルミスが無いかどうかの確認
javascriptで指定したクラス名とhtmlで指定したクラス名が正しいのか確認
などを試してみました
補足情報(FW/ツールのバージョンなど)
回答2件
あなたの回答
tips
プレビュー