dynamic changing max range and document.getElementById

Question

I have a range slider and I want the max range to be set dynamically from the html text of a div with class="aaa". unfortunately it doesn't not work. And maybe I have some error in the var = zzz that sets the max value..

Here's my code

var  zzz = document.getElementById('aaa').val();   
document.getElementById('slider1').max = zzz;  

const $mutuo = $("#mutuo"),
  $rata = $("#rata"),
  $anni = $("#anni"),
  $slider1 = $("#slider1"),
  $slider2 = $("#slider2"),
  $max = $("#aaa").html();


function showAmount1(newAmount){
    document.getElementById('mutuo').innerHTML = newAmount;     
    $mutuo.val($("#mutuo").innerHTML);
    update();
}


function showAmount2(newAmount){

    document.getElementById('anni').innerHTML = newAmount; 
    $anni.val($("#anni").innerHTML);
    update();
}
    
    



  function update() {
  let interesseannuo = 1.60,
    C = $mutuo.html(),
    anni = $anni.html(),
    i = interesseannuo / 12 / 100,
    n = anni * 12,
    rata = C * i / (1 - Math.pow(1 + i, -n));

  $rata.html(rata.toFixed(2) + " €");
}
update();

<div class="info-text-wrapper">
    <p  class="info-paragraph black" val="123456" id="aaa">123456</p>
    <p  class="info-paragraph black">Totale mutuo (€)</p>
     <input type="range" min="0" max="" value="" step="10" onchange="showAmount1(this.value)" id="slider1"/>

    <div class="info-paragraph black" type="text" id="mutuo" >10000</div><br><br><br>

    <p class="info-paragraph black">Durata mutuo (anni)</p>
    <input type="range" min="10" max="30" value="10" step="5" onchange="showAmount2(this.value)" id="slider2">
    <div class="info-paragraph black" type="text" id="anni" >10</div><br><br><br>

    <p class="info-paragraph black">La tua rata</p>
    <div class="paragraph" id="rata"></div><br>
</div>

Answer 1

val() is used in jQuery, For javascript you need to use value

In javascript if you want the input value then use

document.getElementById('aaa').value

Instead of

document.getElementById('aaa').val()

If you want text of element you can use

document.getElementById('aaa').innerHTML

OR

document.getElementById('aaa').innerText

var zzz = document.getElementById('aaa').innerText;
document.getElementById('slider1').max = zzz;

const $mutuo = $("#mutuo"),
        $rata = $("#rata"),
        $anni = $("#anni"),
        $slider1 = $("#slider1"),
        $slider2 = $("#slider2"),
        $max = $("#aaa").html();

function showAmount1(newAmount) {
 document.getElementById('mutuo').innerHTML = newAmount;
 $mutuo.val($("#mutuo").innerHTML);
 update();
}

function showAmount2(newAmount) {
 document.getElementById('anni').innerHTML = newAmount;
 $anni.val($("#anni").innerHTML);
 update();
}

function update() {
 let interesseannuo = 1.60,
         C = $mutuo.html(),
         anni = $anni.html(),
         i = interesseannuo / 12 / 100,
         n = anni * 12,
         rata = C * i / (1 - Math.pow(1 + i, -n));

 $rata.html(rata.toFixed(2) + " €");
}
update();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info-text-wrapper">
    <p  class="info-paragraph black" val="123456" id="aaa">123456</p>
    <p  class="info-paragraph black">Totale mutuo (€)</p>
     <input type="range" min="0" max="" value="" step="10" onchange="showAmount1(this.value)" id="slider1"/>
    <div class="info-paragraph black" type="text" id="mutuo" >10000</div><br><br><br>
    <p class="info-paragraph black">Durata mutuo (anni)</p>
    <input type="range" min="10" max="30" value="10" step="5" onchange="showAmount2(this.value)" id="slider2">
    <div class="info-paragraph black" type="text" id="anni" >10</div><br><br><br>
    <p class="info-paragraph black">La tua rata</p>
    <div class="paragraph" id="rata"></div><br>
</div>