Потратили довольно много времени, пытаясь это сделать, и не можете найти способ работать, может ли кто-нибудь помочь? Я пытаюсь добавить значение ползунка к значению переключателя и дать результат при нажатии кнопки или загрузке страницы
Коды здесь
// Slider Code
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
//Toggle Switch Code
document.addEventListener('DOMContentLoaded', function() {
var checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', function() {
if (checkbox.checked) {
// do this
console.log('Checked');
var toggleoutput = 2000
} else {
// do that
console.log('Not checked');
var toggleoutput = 0
}
});
});
//Grab Sum Script
function getSum() {
var toggleoutputfinal = document.getElementById("toggleoutput").value;
document.getElementById("sum").innerHTML = this.value + toggleoutputfinal;
}
<!DOCTYPE html>
<head>
</head>
<body>
<link rel="stylesheet" href="css/slider.css" />
<link rel="stylesheet" href="css/switch.css" />
<div>
<input type="range" min="1" max="100" value="50" class="slider-pic" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
<label class="switch">
<input type="checkbox">
<div class="slider"></div>
</label>
<br>
<button onclick="document.innerHTML(toggleoutput + demo)">Click me</button>
<span id="sum"></span>
<script src="js/demo.js"></script>
</body>
Функции тумблера и кода ползунка работают правильно, но добавленное значение не появляется после нажатия кнопки, поэтому я предполагаю, что функция getum не работает, но я не уверен в js исправить