無法設定null的屬性（設定“禁用”）

每當我運行我的代碼時，控制臺中都會出現以下錯誤。我正在嘗試將具有 id custominput 的元素設定為啟用 ii 選擇器值是自定義的，但如果是其他任何值則禁用。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>

uj5u.com熱心網友回復：

問題是您使用getElementByIdwhilecustominput是一個類。改用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>

uj5u.com熱心網友回復：

您的輸入沒有 id="custominput" 它有 將其更改為：

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

標籤：javascript html css

上一篇：將Axios配置為可重用模塊

下一篇：使用正則運算式拆分具有相同標題的資料塊