Question

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

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

但是我总是遇到这个Uncaught TypeError：无法设置null错误的属性“ value”，我认为它无法读取单选按钮的值，但是我已经检查过，而且似乎没有错别字或其他内容？

我知道在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

我在上面的评论来解释为什么您的代码无法按预期工作：

加载页面时，脚本正在运行，并且默认情况下不检查任何无线电，因此不会捕获该值，因为您的querySelector参数需要一个:checked值。我建议在收音机上添加一个侦听器，并将显示的大部分代码用作侦听器的函数处理程序。

下面，我重构了您的代码，将eventListeners添加到您的每个无线电中，并将逻辑用作事件处理程序。

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>

我有一个Uncaught TypeError：无法设置null错误的属性'value'

1 个答案: