动态变化的最大范围和 document.getElementById
dynamic changing max range and document.getElementById
我有一个范围滑块,我希望从 div
和 class="aaa"
的 html 文本动态设置 max
范围。不幸的是它不起作用。也许我在设置最大值的 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>
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>
val() 函数只获取输入元素的值。为了获取其他元素的文本,你需要使用innerHTML 或innerText。只需替换
var zzz = document.getElementById('aaa').val();
和
var zzz = document.getElementById('aaa').innerText;
应该可以。
我有一个范围滑块,我希望从 div
和 class="aaa"
的 html 文本动态设置 max
范围。不幸的是它不起作用。也许我在设置最大值的 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>
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>
val() 函数只获取输入元素的值。为了获取其他元素的文本,你需要使用innerHTML 或innerText。只需替换
var zzz = document.getElementById('aaa').val();
和
var zzz = document.getElementById('aaa').innerText;
应该可以。