Is there a way to group together multiple html5 slider fields. Originally I tried doing this will type=number fields but I didn't like the way it looked.
So what I what I have is 7 fields that I want to use sliders with individual min values of 0 and max values of 100 - however - the trick is that I need a way to add them all up to make sure in total they equal 100. None of the fields individually are required. Does that make sense?
Here is the function I tried but its not working at all:
<script>
function percentageTest() {
// Get the value of the input fields
a = document.getElementById("cuts").value;
b = document.getElementById("burns").value;
c = document.getElementById("infection").value;
d = document.getElementById("dermatitis").value;
e = document.getElementById("puncture").value;
f = document.getElementById("sprain").value;
g = document.getElementById("impact").value;
var x = (a + b + c + d + e + f + g);
// grouping together and doing the math
if (x != 100) {
text = "The total percentage must equal 100%";
}
document.getElementById("rec_injuries").innerHTML = text;
}
</script>
You can do something like this (just make it pretty and adapt it to your needs):
HTML
<form>
<formgroup class="ranges">
<input type="range" min="0" max="100">
<input type="range" min="0" max="100">
<input type="range" min="0" max="100">
<input type="range" min="0" max="100">
</formgroup>
</form>
JavaScript
var ranges = Array.from(document.querySelector('.ranges').children);
var total = ranges.reduce(function(acc, curr) {
return acc + Number(curr.value)
}, 0)
// Now you can check total
#Dave Gomez answers is way more elegant, please use it instead. But if you are wondering why it wasn't working :
Your document.getElementById("cuts").value; return strings. You need to convert them to int before adding them. This can be done like this :
a = +document.getElementById("cuts").value;
b = +document.getElementById("burns").value;
... etc
Related
I'm very new to coding and wondering how I can insert the same image multiple times based on the input and output values. My current code for the basic addition is:
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" value="1"> +
<input type="number" id="b" value="0"> =
<output name="x" for="a b"></output>
</form>
Now, I want to be able to add a number of images corresponding to the output value that I obtain. How can I do this? Again, I'm sorry if the answer is obvious. I'm very new to this.
For good practice it's better to separate your HTML and Javascript by a function.
You need to follow these steps in the function.
Get input values to variables.
Add them and display using document.getElementById().value
Add images using a loop (c times)
Here is the working code
var update = () => {
let a = parseInt(document.getElementById('a').value);
let b = parseInt(document.getElementById('b').value);
let c = isNaN(a + b) ? 0 : (a + b);
document.getElementById('x').value = c;
document.getElementById('images').innerHTML = '';
for (let i = 0; i < c; i++) {
document.getElementById('images').innerHTML += '<img src="http://via.placeholder.com/200x150">';
}
}
<form oninput="update();">
<input type="number" id="a" value="1"> +
<input type="number" id="b" value="0"> =
<output id="x" for="a b"></output>
</form>
<div id='images'></div>
Replace http://via.placeholder.com/200x150 with your image path.
Hope it helps.
I'm trying to animate an output which is calculated based on a single input value * 4.5. The calculation itself is working but I cannot figure out how to animate the value, what I'm trying to do is have the output count up to the calculated value quite quickly. I've found https://codepen.io/shivasurya/pen/FatiB which has the count animation I'd like to implement, but can't figure out how to implement it to my input and output fields, so far I have:
<form id="ewcalc" oninput="updateOutput()">
<input name="income" type="number" value="0" />
<output for="income" name="loan">0</output>
</form>
<script type="text/javascript">
function updateOutput() {
var form = document.getElementById("ewcalc");
form.elements["loan"].value=eval(parseInt(form.elements["income"].value) * 4.5);
}
</script>
Any suggestions how I can implement the animation? I've tried several things, none of which are working, and getting errors if I try using onsubmit.
You'll probably want to use requestAnimationFrame like this:
function updateOutput() {
var income = $("#income").val() * 4.5;
var output = Number($("#loan").text());
if (income !== output) {
if (income > output)
output += 0.5;
else if (income < output)
output -= 0.5;
$("#loan").text(output);
requestAnimationFrame(updateOutput);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="ewcalc" oninput="updateOutput()">
<input id="income" type="number" value="0" />
<output for="income" id="loan">0</output>
</form>
Hi I have set a filter section for my drum pads and it works fine except for the values it represents i would like to convert the values from linear to log the code is as follows
HTML CODE
<div id="sectionEffects">
<div id="Effect1">
<title> Effect 1 </title>
<p>
Filter on: <input class="slider" type="checkbox" checked="false" oninput="biquadFilter.togglebiquadFilter(this);"/>
</p>
<p>
Frequency: <input type="range" min="0" max="40" step="1" value="20000" onChange="" id="filter"/>
</p>
<p class="note">Current value: <span id="currentValue">0</span></p>
</div>
JS CODE
var selectedPad = "";
var padCutoffs = [];
padCutoffs["Kick"] = 20000;
padCutoffs["Snare"] = 20000;
padCutoffs["Tom"] = 20000;
padCutoffs["Crash"] = 20000;
padCutoffs["Roll"] = 20000;
padCutoffs["Hi-Hat"] = 20000;
$('#filter').on("change mousemove", function() {
padCutoffs[selectedPad] = $(this).val()* 500; //look up linear to log
});
Why use a lookup table? You can do this two ways:
Use the math functions - Math.log2(x) and Math.pow(2, x) - to convert between actual data.
Instead of pure numbers, just use the filter.detune AudioParam (after setting filter.frequency to a known number). For example, for a 5-octave filter sweep, set filter.frequency.value=0, then vary detune from a min of 0 to a max of 1200*5. (Detune is in cents, 1200 cents per octave.)
What I could think of was creating an exponential regression from the data (I used desmos) and I got y = 1058500*e^(9.0015)x-131640
you could approximate e to 2.71828
I need to set a max value of an input based on the value of another input.
I will have two inputs, input x and input y, a user inputs a value in each but the value for y can be no more than 80% of the value of x, so I want a max value on input y so you can't go over 80% of input x.
so if someone puts 100 in input x and tries to put 90 in input y, input y would change to be 80 because that would be the max.
I intend to use javascript and HTML to achieve this.
I suggest monitoring the input using the onchange event of both fields and limiting the value using Math.min(...)
Here is a snippet:
var elX = document.getElementById("X");
var elY = document.getElementById("Y");
function limit() {
elY.value=Math.min(Math.round(elX.value*.8),elY.value);
}
elX.onchange=limit;
elY.onchange=limit;
<input type="number" id="X" value="0"><br>
<input type="number" id="Y" value="0">
Here is a simple solution using JQuery and 2 simple input fields. It pretty much does what you want -> JSFiddle
Related HTML:
<input type="number"id="x">
<input type="number" id="y">
Related JS:
(function(){
$("#y").on("change", function(e){
var x = $("#x").val()
if($(this).val() > (x*80)/100){
$(this).val(((x*80)/100));
alert("field Y cannot excede 80% of field X")
}
})
}())
If I understand right:
The input is like something this:
<input type="number" id="Y" max="numberHere">
You can do it like this:
var temp = document.getElementById("Y");
var maxValue = document.getElementById("X").value * 0.8;
temp.setAttribute("max",maxValue); // set a new value;
I feel like I'm a novice again. I thought I was long past these problems. below is a simple script with two function neither of which work. What am I missing. Any help appreciated.
function calculator() {
var bee = document.getElementById("beerPerc").value;
var win = document.getElementById("winePerc").value;
var liq = 100 - (bee + win);
document.getElementById("liquorPerc").value = liq;
}
function calculator2() {
document.getElementById("liquorPerc").value = parseInt(100 - (document.getElementById("beerPerc").value + document.getElementById("winePerc").value))
}
<div id="calcArea">
<div>
<input type="number" id="beerPerc" value="50" onkeyup="calculator2()"> % of Beer Drinkers<br>
<input type="number" id="winePerc" value="30" onkeyup="calculator2()"> % of Wine Drinkers<br>
<input type="number" id="liquorPerc" onkeyup="calculator2()"> % of Liquor Drinkers<br>
</div>
</div>
Two things:
Case is significant. If you declare the variable bee, you can't read it with Bee.
.value is always a string. You need to convert the strings to numbers:
var bee = Number(document.getElementById("beerPerc").value);
If you don't do this, + will perform string concatenation, not addition.
You don't need to call parseInt() on the result of a numeric calculation, that's always a number.
function calculator2() {
document.getElementById("liquorPerc").value = 100 - (parseInt(document.getElementById("beerPerc").value, 10) + parseInt(document.getElementById("winePerc").value, 10)))
}