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

220

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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

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

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

195

javascript

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

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

157

javascript

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

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

208

javascript

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

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

175