Add values with jquery

Question

I have an input of type number that is a select with two different options and values, I have to add the value of my input with the value of my select but whenever I try, it reports me this error "Uncaught Typeerror: Cannot set Property 'value' of null".

Here is the code:

var preco = $('#def_preco-21 :selected').val();

calc_preco();



function calc_preco() {

  var quantidade_21 = $('.quant_g-21').val();
  var valor_unitario_21 = preco;
  var valor_total_21 = accounting.formatNumber(valor_unitario_21 * quantidade_21, 2, '', ',');

  document.getElementById('valor_21').value = valor_total_21;

};



$(document).ready(function() {
  $('.quant_g-21').change(function() {
    calc_preco();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class='cont_prod-list'>
  <div class='div_pai-opt'>
    <div class='opt_prod'>
      <select class='tam_nec' id='def_preco-21'>
        <option value='8'>Produto 1</option>
        <option value='7'>Produto 2</option>
      </select>
      <div id='preco_g-21' class='preco_g-21 preco_g' type='text' name='preco_g'><span type='text' id='valor_21 valor_CSS' readonly>Valor: </span></div>

      <input class='quant_g-21 quant_g' id='quanti_g' type='number' name='quant_g' value='10' required min='10' />

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

i need to add my input number and my select value and replace my span by multiplying input and select.