javascript - 动态改变最大范围和 document.getElementById

Question

我有一个范围 slider ，我希望使用 max 从 div 的 html 文本动态设置 class="aaa" 范围。不幸的是它不起作用。也许我在设置最大值的 var = zzz 中有一些错误..

这是我的代码

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() 用于 jQuery，对于 javascript，您需要使用 value

在 javascript 中，如果您想要输入值，则使用

document.getElementById('aaa').value

而不是

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

如果你想要元素的文本，你可以使用

document.getElementById('aaa').innerHTML

或者

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>