I have an Uncaught TypeError: Cannot set property 'value' of null error

Question

So I have radio buttons with a set value and my js script should check the value of those buttons and return a value which = range

The "range" should then appear on the price range input

But I always get this Uncaught TypeError: Cannot set property 'value' of null error which I assume it cannot read the value of the radio buttons but I've checked and I don't seem to have any typos or whatever?

I'm aware there are a lot of answer for the same problem here on Stack Overflow but I haven't been able to correct my problem with other questions/answers, please correct with a link if there's an answer for me elsewhere.

// 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

My comment from above to explain why your code isn't working as intended:

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.

Below I have refactored your code to add eventListeners to each of your radios and used the logic as the event handler.

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>