我的 javascript 代碼不起作用，但在控制台中執行時它起作用

Question

我有一個問題，我的 javascript 代碼不起作用，我在控制台中有錯誤，但是當我將其粘貼到控制台時，它可以正常工作。 有人可以解釋我

錯誤-> script.js:1 Uncaught TypeError: Cannot read properties of null (reading 'checked')

 if (document.getElementById('r1').checked){ document.querySelector('.title-opa-dentals').classList.add('opacity') };

 .opacity{ opacity: 1;important; }

 <div class="box-slider slides"> <input type="radio" name="r" id="r1" checked> <input type="radio" name="r" id="r2"> <input type="radio" name="r" id="r3"> <div class="select-1"></div> <div class="select-2"></div> <div class="select-3"></div> <div class="navigation"> <label for="r1" class="bar"> <a class="title-opa-dentals">Dentals</a> </label> <label for="r2" class="bar"> <a class="title-opa-jewellers">Jewellers</a> </label> <label for="r3" class="bar"> <a class="title-opa-industrials">Industrials</a> </label> </div>

Answer 1

確保在文檔加載后運行代碼（使用window.onload 、 window.addEventListener()或將script標簽放在正文的底部。）