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  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  id="submit" type="submit" value="Start Game">

</form>

CodePudding user response：

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  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  id="submit" type="submit" value="Start Game">

</form>

CodePudding user response：

Your input does not have id="custominput" it has Change it to:

<input id='custominput' type = "text" name ="last_name" disabled=true/>