Develop Reference

Function to change range input value not working

So, I have a input in my template
<input type="range" min="0" max="100" value="0" id="duration_slider" onchange="seek()">
My javascript for seek() and updating the slider is
function seek(){
slider_position = mysong.duration * (mysong.value / 100);
mysong.currentTime = slider_position;
}
function range_slider(){
let position = 0;
if(!isNaN(mysong.duration)){
position = mysong.currentTime * (100 / mysong.duration);
slider.value = position;
}
}
where mysong is the variable i get from my audio input in html.
var mysong = document.getElementById('mysong');
Sorry I don't know much javascript, I needed it while doing my django project. I applied same concept for my volume controls and it worked somehow.

I hope value of your slider_position corresponding to value of slider.value.
So you need to catch that value from slider...
var slider = document.getElementById('duration_slider');
and than define value variable in let slider_position into seek() function
function seek() {
let slider_position = slider.value;
mysong.currentTime = slider_position;
console.log(slider_position); //for displaying value in console
}

<input type="range" id="slider" min="0" max="100" value="0"/>
<script>
var slider = document.getElementById('slider');
const MAX_VALUE = 100;
const MIN_VALUE = 1;
function updateSliderRange(updatedValue){
const currentValue = slider.value;
slider.value = (currentValue >= MIN_VALUE && currentValue <=100)
? updatedValue
: currentValue;
}
</script>

How can I grab an HTML slider value as an integer for JavaScript?

I'm trying to obtain a value out of an HTML slider so I can dynamically use it as an integer in JavaScript.The problem I'm having is I can't seem to use the value as a proper integer.
For example, if my slider value was 5 & if l tried to store it in a variable and add 10, it would output as '510' instead.
Maybe I'm an idiot and missing something very fundamental or simple, but it always ends up as a string in the end.I have tried parseInt() as well, but it doesn't seem to help.
I've set up a simple example of code below:
JS
var sliderUnit = document.getElementById("slider");
var outputUnit = document.getElementById("amtOutput");
var a = 0;
var b = 10;
outputUnit.innerHTML = sliderUnit.value;
sliderUnit.oninput = function(){
outputUnit.innerHTML = this.value;
console.log(sliderUnit.value);
a = this.value;
parseInt(a);
}
function test(){
b += a;
console.log("b: " + b + " | a: " + a);
}
HTML
<div class="sliderContainer">
<input type="range" min="1" max="15" value="7" id="slider">
<input type="submit" value="Submit" onclick="test()" />
| Slider number: <span id="amtOutput"></span>
</div>

The problem is that your are calling the parseInt(a) but the returned Integer value is not being handled properly, you should do as this a = parseInt(a);
var sliderUnit = document.getElementById("slider");
var outputUnit = document.getElementById("amtOutput");
var a = 0;
var b = 10;
outputUnit.innerHTML = sliderUnit.value;
sliderUnit.oninput = function(){
outputUnit.innerHTML = this.value;
console.log(sliderUnit.value);
a = this.value;
a = parseInt(a); // Change this line
}
function test(){
b += a;
console.log("b: " + b + " | a: " + a);
}
<div class="sliderContainer">
<input type="range" min="1" max="15" value="7" id="slider">
<input type="submit" value="Submit" onclick="test()" />
| Slider number: <span id="amtOutput"></span>
</div>
If not the variable a will continue to be a string becouse it wasn't changed

You need to parse the string as int using parseInt.
Working code:
var sliderUnit = document.getElementById("slider");
var outputUnit = document.getElementById("amtOutput");
var a = 0;
var b = 10;
outputUnit.innerHTML = sliderUnit.value;
sliderUnit.oninput = function(){
outputUnit.innerHTML = this.value;
console.log(sliderUnit.value);
a = this.value;
parseInt(a);
}
function test(){
b = parseInt(b)
a = parseInt(a);
b += a;
console.log("b: " + b + " | a: " + a);
}
<div class="sliderContainer">
<input type="range" min="1" max="15" value="7" id="slider">
<input type="submit" value="Submit" onclick="test()" />
| Slider number: <span id="amtOutput"></span>
</div>
Working JSFiddle

Input range strange behavior when changing width via javascript

I have a group of sliders, they can all take a value from 0 to 100. I need the total of the group to always be less than 100 as they are percentages. I use the max attribute and some simple math to prevent the total from surpassing this.
Originally I just changed the max value, however, this doesn't change the length of the slider just what value all the way right is. This would be confusing to the user as 50% of the bar could be all the way right when it used to be in the middle.
To combat this I used a container div and change the slider's width to the corresponding percentage of the containing div.
This works as intended, but the slider handle slightly moves whenever you change a sibling slider.
Is there a way to prevent these small movements.
Is there a completely different easier way to do this seemly simple task, using only pure js.
<form id="form">
<input id="incm" type="number" value="1000"/>
<ul>
<li>Slider 0
<div class="sliderContainer"><input class="slider" id="pct0" type="range" min="0" max="100" value = "50"/></div>
<output id="pctOutput0"></output>
<output id="amtOutput0"></output>
</li>
<li>Slider 1
<div class="sliderContainer"><input class="slider" id="pct1" type="range" min="0" max="100" value = "50"/></div>
<output id="pctOutput1"></output>
<output id="amtOutput1"></output>
</li>
<li>Slider 2
<div class="sliderContainer"><input class="slider" id="pct2" type="range" min="0" max="100" value = "0"/></div>
<output id="pctOutput2"></output>
<output id="amtOutput2"></output>
</li>
<li>Slider 3
<div class="sliderContainer"><input class="slider" id="pct3" type="range" min="0" max="100" value = "0"/></div>
<output id="pctOutput3"></output>
<output id="amtOutput3"></output>
</li>
<li>Slider 4
<div class="sliderContainer"><input class="slider" id="pct4" type="range" min="0" max="100" value = "0"/></div>
<output id="pctOutput4"></output>
<output id="amtOutput4"></output>
</li>
</ul>
<p><output id="pctSum"></output><output id="amtSum"></output></p>
</form>
function calc() {
var pct = [],
pctI = [],
amt = [],
incm = document.getElementById("incm").value
for (i = 0; i < 5; i++) {
pct[i] = document.getElementById("pct" + i).value
document.getElementById("pctOutput" + i).innerHTML = pct[i] + "%"
pctI[i] = parseInt(pct[i])
amt[i] = pctI[i] * 0.01 * incm
document.getElementById("amtOutput" + i).innerHTML = "£" + amt[i]
}
var pctSum = pctI.reduce((a,b) => a + b, 0)
var amtSum = amt.reduce((a,b) => a + b, 0)
document.getElementById("pctSum").innerHTML = "Total Percentage " + pctSum + "%"
document.getElementById("amtSum").innerHTML = "Total Amount £" + amtSum
for (i = 0; i < 5; i++) {
document.getElementById("pct" + i).max = 100 - pctSum + pctI[i]
document.getElementById("pct" + i).style.width = document.getElementById("pct" + i).max + "%"
}
}
document.getElementById("form").addEventListener("input", calc)
window.onload = calc()
JSFiddle https://jsfiddle.net/Zbedjajohnson/ca5b1psy/5/

Really interesting question. Here's what I've come up with.
function initSliderGroups() {
const sliderGroups = document.querySelectorAll(".sliderGroup");
for (let sliderGroup of sliderGroups) {
const sliders = [...sliderGroup.querySelectorAll(".slider")];
const max = sliderGroup.getAttribute('max');
sliders.forEach(slider => {
slider.max = max;
slider.min = 0;
const sliderContainer = document.createElement('span');
sliderContainer.style = 'position: relative;';
slider.parentNode.insertBefore(sliderContainer, slider);
sliderContainer.appendChild(slider);
const limitDiv = document.createElement('div');
limitDiv.className = 'limitDiv';
limitDiv.style = 'position: absolute; top: 4px; left: 0; z-index: 1; width: 0; height: 5px; background-color: #555; border-radius: 5px;';
sliderContainer.appendChild(limitDiv);
slider.addEventListener("input", () => onSliderInput(slider));
});
function onSliderInput(movingSlider) {
//limit sum of values to max (defined as 100 by .sliderGroup div attribute)
const usedByOthers = sliders.filter(s => s !== movingSlider).map(s => +s.value).reduce((a, b) => a + b);
const available = max - usedByOthers;
if (movingSlider.value > available) movingSlider.value = available;
//update limit bars
for (let slider of sliders) {
const limitDiv = slider.parentNode.querySelector('.limitDiv');
const usedByOthers = sliders.filter(s => s !== slider).map(s => +s.value).reduce((a, b) => a + b);
const available = max - usedByOthers;
const sliderWidth = slider.clientWidth + 1;
const leftOffset = sliderWidth * (available / max);
const width = sliderWidth - leftOffset;
const extraOffset = 17 * (max - available) / max;
limitDiv.style.left = Math.min(leftOffset + extraOffset, sliderWidth) + 'px';
limitDiv.style.width = Math.max(width - extraOffset, 0) + 'px';
}
}
//init
if (sliders[0]) onSliderInput(sliders[0]);
}
}
initSliderGroups();
<div class="sliderGroup" max="100">
<input class="slider" type="range" value="25" /><br/>
<input class="slider" type="range" value="0" /><br/>
<input class="slider" type="range" value="0" /><br/>
<input class="slider" type="range" value="0" /><br/>
</div>
Basically you just give all your slider inputs class="slider", wrap them in an element with class="sliderGroup" max="100", then call initSliderGroups() and it'll limit those sliders to a max combined value of 100 (and shows dark grey limit bars).
In your case you'd do the following:
Add class="sliderGroup" max="100" to your <ul>.
Add my javascript above your javascript.
Delete your for loop in calc that changes max and width of sliders.

How to reuse code block in javascript

I am new to learning javascript and apologize if this question is too basic. I have tried to search for a solution but nothing has been clear to me. I have created this code in this link.
https://jsfiddle.net/5p7wzy9x/3/
var btn = document.getElementById("calc");
btn.addEventListener("click", function() {
var total = 0;
var count = 0;
var values = document.getElementsByClassName("value");
for (var i = 0; i < values.length; i++) {
var num = parseFloat(values[i].value);
if (!isNaN(num)) {
total += num;
count++;
}
}
output = total / count;
var totalTb = document.getElementById("total");
totalTb.value = count ? output : "NaN";
});
var btn = document.getElementById("calcTwo");
btn.addEventListener("click", function() {
var total = 0;
var count = 0;
var values = document.getElementsByClassName("value");
for (var i = 0; i < values.length; i++) {
var num = parseFloat(values[i].value);
if (!isNaN(num)) {
total += num;
count++;
}
}
output = (total / count);
var totalTb = document.getElementById("total");
totalTb.value = output >= 90 ? "A"
: output >= 80 ? "B"
: output >= 70 ? "C"
: output >= 60 ? "D"
: "YOU FAIL!";
});
My question is, how would I go about being able to use the same code for the second "grade" button without having to copy and pasting the same code?
I saw that you can use functions to invoke the same code block but am confused how I would go about it. I apologize if this question has already been answered, but I have diligently searched and tried to figure this out on my own. Thank you in advanced.

Instead of passing anonymous functions (functions with no names) to your event handlers as data:
btn.addEventListener("click", function() { ...
set up those functions as "function declarations" so that you can call them by name. Then, instead of passing them into the .addEventListner() method call, you reference them by name (without parenthesis next to the name).
Here's an example:
// Both buttons are configured to call the same event handling function:
document.getElementById("btn1").addEventListener("click", doSomething);
document.getElementById("btn2").addEventListener("click", doSomething);
function doSomething(){
console.log("Hello!");
}
<input type=button id="btn1" value="Click Me">
<input type=button id="btn2" value="Click Me">

Here is how you can combine common code in one function:
var btn = document.getElementById("calc");
var btn2 = document.getElementById("calcTwo");
var totalTb = document.getElementById("total");
btn.addEventListener("click", function() {
var output = getTotal();
totalTb.value = output < Infinity ? output : "NaN";
});
btn2.addEventListener("click", function() {
var output = getTotal();
totalTb.value = output >= 90 ? "A"
: output >= 80 ? "B"
: output >= 70 ? "C"
: output >= 60 ? "D"
: "YOU FAIL!";
});
function getTotal() {
var total = 0;
var count = 0;
var values = document.getElementsByClassName("value");
for (var i = 0; i < values.length; i++) {
var num = parseFloat(values[i].value);
if (!isNaN(num)) {
total += num;
count++;
}
}
output = total / count;
return output;
}
<form id="form1">
<input class="value" type="text" value="80" /><br />
<input class="value" type="text" value="50" /><br />
<input class="value" type="text" value="15" /><br />
<input class="value" type="text" value="30" /><br />
<input class="value" type="text" value="90" /><br />
<br />
<input type="text" id="total" />
<button type="button" id="calc">Calculate</button>
<button type="button" id="calcTwo">Grade</button>
</form>

Javascript image arrays and random images

need a bit of help with a random image array. I need to create 5 images that come up at random when the Start button is clicked (1 at a time) and then have 5 buttons. The 5 buttons that stay there correspond to the random images. First button = image[1] (from array) etc.
img0 stays on the screen and is swapped out for the random images from the array.
I can't seen to get the random image to display. It's probably something simple but I'm banging my head against a wall with it.
Any help you guys can give would be great.
HTML
<div style="background-color:grey; position: absolute; left:50px; top:150px">
<img src="img0.jpg" id="osBus" alt="0" />
</div>
CODE
<input id="b2" type="button" onclick="btn2_onClick()" value="2" style="position:absolute; left:125px; top:375px"
disabled class="btns" />
<input id="b3" type="button" onclick="btn3_onClick()" value="3" style="position:absolute; left:225px; top:375px"
disabled class="btns" />
<input id="b4" type="button" onclick="btn4_onClick()" value="4" style="position:absolute; left:325px; top:375px"
disabled class="btns" />
<input id="b5" type="button" onclick="btn5_onClick()" value="5" style="position:absolute; left:425px; top:375px"
disabled class="btns" />
<br />
<script language="javascript">
var Imgs = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jog"];
var Num
function btnStart_onClick() {
Num = 1 + parseInt(Math.random() * 5);
document.getElementById("Imgs") == Imgs[Num];
}
Any help you guys can offer with this would be greatly appreciated.
Thanks

Imgs array does not have an element at index 5. Use
Math.floor(Math.random() * Imgs.length)
Also no element has id "Imgs"; do you mean "osBus"? You can change the displayed image by setting the src attribute of an <img> element.
var Imgs = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"];
var Num = 0;
function btnStart_onClick() {
Num = Math.floor(Math.random() * Imgs.length);
document.getElementById("osBus").src = Imgs[Num];
}

You have to update the src property.
And a few things:
Why are you doing document.getElementById("Imgs") when there is no element where id="Imgs"?
Where is btnStart_onClick called from?
Use = for assignment
You only need to multiply by 4, as Math.random() returns 0 -> 1
function btnStart_onClick() {
var imgNum = (1 + (Math.round(Math.random() * 4)));
document.getElementById("osBus").src = imgNum + '.jpg';
}

var Imgs = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jog"];
var Num;
function randomNumber(min, max) {
return Math.floor(Math.random() * ((max - min) + 1) + min);
}
function btnStart_onClick() {
Num = randomNumber(0, 4);
document.getElementById("osBus").src = Imgs[Num];
}