Cannot set properties of null (setting 'disabled')

June 8, 2022

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. custominput elements are text inputs part of a form.

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>

>Solution :

The issue is that you use getElementById while custominput is a class. use querySelector instead:

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>