Слайдер калькулятор - инициализация

254
30 июня 2018, 21:20

Есть готовый калькулятор. Как сделать так, что при загрузке страницы, он сразу срабатывал и показывал значение? Сейчас он срабатывает только если его начать двигать(слайдер)

function calc(tb){
  var v = document.getElementById("val") ;
  var r = document.getElementById("result");
  v.innerHTML = tb.value;
  r.innerHTML = tb.value*2300*0.27;
}
<input type="range" min="0" max="100" id="track"  onchange="calc(this);"/>
<div>Значение <span id="val"></span></div>
<div>Стоимость <span id="result"></span></div>
Answer 1

У вас ошибка была не var v = document.getElementById("ex8") ; а var v = document.getElementById("val");

$(document).ready(function () { 
    $("#ex8").slider({ 
        formatter: function(value) { 
            calc(value); 
 
        }, 
        value: 50, 
        min: 1, 
        max: 100, 
        tooltip: 'always'// Slider will instantiate showing 8.12 due to specified precision 
    }); 
}); 
function calc(value){ 
    var v = document.getElementById("val"); 
    var r = document.getElementById("result"); 
    v.innerHTML = value; 
    r.innerHTML = Math.ceil(value*2300*0.27); 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.2/css/bootstrap-slider.css" rel="stylesheet" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.2/bootstrap-slider.js"></script> 
 
<input id="ex8" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="14"/> 
 
<div>Значение <span id="val"></span></div> 
<div>Стоимость <span id="result"></span></div>

Answer 2

Просто запустите функцию со значением 

function calc(tb){ 
  var v = document.getElementById("val") ; 
  var r = document.getElementById("result"); 
 
  v.innerHTML = tb.value; 
  r.innerHTML = tb.value*2300*0.27; 
 
} 
 
calc(document.getElementById("track"));
<input type="range" min="0" max="100" id="track"  onchange="calc(this);"/> 
 
<div>Значение <span id="val"></span></div> 
<div>Стоимость <span id="result"></span></div>

Answer 3

Вот решение со слайдером Bootstrap

var slider = new Slider('#ex1', { 
	formatter: function(value) { 
    calc(value); 
	} 
}); 
 
function calc(value){ 
  var v = document.getElementById("val") ; 
  var r = document.getElementById("result"); 
  v.innerHTML = value; 
  r.innerHTML = value*2300*0.27; 
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.2/css/bootstrap-slider.css" rel="stylesheet"/> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.2/bootstrap-slider.js"></script> 
 
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="14"/> 
 
<div>Значение <span id="val"></span></div> 
<div>Стоимость <span id="result"></span></div>

READ ALSO
JS. Функция для изменения ширины и высоты Diva
javascript

JS. Функция для изменения ширины и высоты Diva

В поля(инпуты) вводится высота и ширина, и блок должен тут же менять ширину и высоту, но оставаться в нужных пределах (250 на 250)

 238
Как установить модульную систему AMD?
javascript

Как установить модульную систему AMD?

Знаю, что есть более современные модульные системы, но хотелось бы понять, как устанавливается именно эта?

 194
Slick slider настроить автоматическую прокрутку?
javascript

Slick slider настроить автоматическую прокрутку?

У slick слайдера если количество элементов меньше или столько же сколько должно отображаться, то скрываются стрелки и перестает работать автоматическая...

 243
Блокировать повторный вызов alert javascript [дубликат]
javascript

Блокировать повторный вызов alert javascript [дубликат]

На данный вопрос уже ответили:

 216