[英]Cannot set properties of null (setting 'disabled')
I'm having the following error come up in the console whenever I run my code.每当我运行我的代码时,控制台中都会出现以下错误。 I am trying to set elements with the id custominput to be enabled ii the selector value is custom, but disabled if it is anything else.我正在尝试将具有 id custominput 的元素设置为启用 ii 选择器值是自定义的,但如果是其他任何值则禁用。 custominput elements are text inputs part of a form. custominput 元素是表单的文本输入部分。
Cannot set properties of null (setting 'disabled')
console.log('working'); var selector = document.getElementById("qset"); var custominp = document.getElementById("custominput"); console.log(selector.value); custominp.disabled = false; selector.addEventListener("change", qsetChange); function qsetChange() { if (selector.value === "custom") { console.log('in loop', selector.value); custominp.disabled = true; } else { console.log(selector.value); custominp.disabled = false; } }
html { background-color: rgb(52, 65, 96); } form.hostoptions { font-size: 25px; color: black; background-color: #9edfff; border-color: #9edfff; border-style: solid; border-radius: 10px; height: fit-content; width: fit-content; text-align: center; margin: 0; padding: 30px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0px 0px 100px rgba(0, 0, 0, .4); } .formtextinput { height: 1px; }
<form class='hostoptions' action="gamescreen"> <label for="obstacles">% obstacles on track</label><br> <input type="range" id="obs" name="obstacles" min="0" max="100" value="5" step="1" oninput="this.nextElementSibling.value = this.value"> <output>5</output>% <br> <label for="qset">Question set:</label> <select class="qset" id="qset" name="qset"> <option value="q1" selected>Q1</option> <option value="q2">Q2</option> <option value="q3">Q3</option> <option value="custom">Custom</option> </select> <br> <div id="customQ"> Custom: <input class='custominput' type="text" name="last_name" disabled=true/> </div> <br><br> <input class="submit" id="submit" type="submit" value="Start Game"> </form>
您的输入没有 id="custominput" 它有 class="custominput" 将其更改为:
<input id='custominput' type = "text" name ="last_name" disabled=true/>
The issue is that you use getElementById
while custominput
is a class.问题是您使用getElementById
而custominput
是一个类。 use querySelector
instead:使用querySelector
代替:
console.log('working'); var selector = document.getElementById("qset"); var custominp = document.querySelector(".custominput"); console.log(selector.value); custominp.disabled = false; selector.addEventListener("change", qsetChange); function qsetChange() { if (selector.value === "custom") { console.log('in loop', selector.value); custominp.disabled = true; } else { console.log(selector.value); custominp.disabled = false; } }
html { background-color: rgb(52, 65, 96); } form.hostoptions { font-size: 25px; color: black; background-color: #9edfff; border-color: #9edfff; border-style: solid; border-radius: 10px; height: fit-content; width: fit-content; text-align: center; margin: 0; padding: 30px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0px 0px 100px rgba(0, 0, 0, .4); } .formtextinput { height: 1px; }
<form class='hostoptions' action="gamescreen"> <label for="obstacles">% obstacles on track</label><br> <input type="range" id="obs" name="obstacles" min="0" max="100" value="5" step="1" oninput="this.nextElementSibling.value = this.value"> <output>5</output>% <br> <label for="qset">Question set:</label> <select class="qset" id="qset" name="qset"> <option value="q1" selected>Q1</option> <option value="q2">Q2</option> <option value="q3">Q3</option> <option value="custom">Custom</option> </select> <br> <div id="customQ"> Custom: <input class='custominput' type="text" name="last_name" disabled=true/> </div> <br><br> <input class="submit" id="submit" type="submit" value="Start Game"> </form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.