Question

我有一个 Uncaught TypeError: Cannot set property 'value' of null 错误

2019-09-06

308

javascript html

因此，我有一个设置值的单选按钮，我的 js 脚本应该检查这些按钮的值并返回一个 = range 的值

然后“range”应该出现在价格范围输入中

但是我总是得到这个 Uncaught TypeError: Cannot set property 'value' of null 错误，我认为它无法读取单选按钮的值，但我已经检查过了，似乎没有任何拼写错误或其他什么？

我知道 Stack Overflow 上有很多针对同一问题的答案，但我无法通过其他问题/答案来纠正我的问题，如果其他地方有适合我的答案，请使用链接纠正。

// Price Range 

VERBOSE = true;


$(document).ready(function() {

  if (VERBOSE) {
    console.log("ready gamme!");
  }
  document.querySelector('input[name="radio[answer]"]:checked').value = range
  if (range == "1") {
    return 7565;
  } else if (range == "2") {
    return 12345
  } else if (range == "3") {
    return 15400
  }

  document.getElementById('range').innerHTML = range

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="col-lg-5 col-sm-5">
  <div class="heading-title">
    <h2>Select a Price Range:</h2>
  </div>

  <!-- GAMME -->
  <fieldset class="mt-60">
    <div class="toggle-transparent toggle-bordered-full clearfix">
      <div class="toggle active">
        <div class="toggle-content">

          <div class="row mb-0">
            <div class="col-lg-12 m-0 clearfix">
              <label class="radio float-left mt-0">
	                <input id="standard" name="radio[answer]" type="radio" value="1" />
	                <i></i> <span class="fw-300">Standard</span>
	              </label>
            </div>
            <div class="col-lg-12 m-0 clearfix">
              <label class="radio float-left">
	                <input id="premium" name="radio[answer]" type="radio" value="2" />
	                <i></i> <span class="fw-300">Premium</span>
	              </label>
            </div>
            <div class="col-lg-12 m-0 clearfix">
              <label class="radio float-left">
	                <input id="excelium" name="radio[answer]" type="radio" value="3" />
	                <i></i> <span class="fw-300">Excelium</span>
	              </label>
            </div>
          </div>

        </div>
      </div>
    </div>
  </fieldset>

Answer 1

上面的评论解释了为什么您的代码没有按预期工作：

Your script is running when the page is loaded and there are no radios checked by default, therefore the value doesn't get caught because your querySelector parameter is requiring a :checked value. I would recommend adding a listener on the radios and turning the bulk of your shown code as a function handler for the listener.

下面我重构了您的代码，向您的每个收音机添加事件监听器，并使用逻辑作为事件处理程序。

const radios = document.querySelectorAll('input[name="radio[answer]"]');

radios.forEach(r => {
  r.addEventListener('change', evt => {
    const checkedValue = (r.checked) ? r.value : 0;
    let range;
    if (checkedValue == "1") {
      range = 7565;
    } else if (checkedValue == "2") {
      range =  12345
    } else if (checkedValue == "3") {
      range =  15400
    }

    document.getElementById('range').innerHTML = range
  });
});

<div class="col-lg-5 col-sm-5">
      <div class="heading-title">
        <h2>Select a Price Range:</h2>
      </div>

      <!-- GAMME -->
      <fieldset class="mt-60">
        <div class="toggle-transparent toggle-bordered-full clearfix">
          <div class="toggle active">
            <div class="toggle-content">

              <div class="row mb-0">
                <div class="col-lg-12 m-0 clearfix">
                  <label class="radio float-left mt-0">
                    <input id="standard" name="radio[answer]" type="radio" value="1"/>
                    <i></i> <span class="fw-300">Standard</span>
                  </label>
                </div>
                <div class="col-lg-12 m-0 clearfix">
                  <label class="radio float-left">
                    <input id="premium" name="radio[answer]" type="radio" value="2" />
                    <i></i> <span class="fw-300">Premium</span>
                  </label>
                </div>
                <div class="col-lg-12 m-0 clearfix">
                  <label class="radio float-left">
                    <input id="excelium" name="radio[answer]" type="radio" value="3" />
                    <i></i> <span class="fw-300">Excelium</span>
                  </label>
                </div>
              </div>

            </div>
          </div>
        </div>
      </fieldset>
</div>
<div id="range"></div>