I'm a newbie in terms of js, and I need to make such a calculator that does not provide data, but takes them from the field. For illustration I did this file
jsfiddle.net/HHv3y/3/
<input id="id1" type="range" min="1" step="1" max="6" value="1" onChange="sliderChange(); setValue1(this.value)" />
<br>
<input id="id2" type="range" min="1" max="4" value="1" step="1" onChange="sliderChange(); setValue2(this.value)" />
result: <span id="sliderStatus">12</span>
There are only two sliders (1 - 6 steps long) and a field for the result. In the jsFiddle is an example of a field which I would like to set.
I just need to show the value of the intersections of the two sliders, which represents an adequate entry field.
Try this simple approach.
function sliderChange() {
var var1 = document.getElementById('id1').value;
var var2 = document.getElementById('id2').value;
if (var1 == var2) { //If both values are equal show the result
document.getElementById('sliderStatus').innerHTML = var1;
} else {
alert('Not interscted');
}
}
Whenever the values are equal, the resultant value will be displayed.
JSFiddle
Related
i want to set a max value to a number input. I used the "max" HTML attribute but the user can write a number over the max value anyway. Is there any way to reset the value of that input to the maximum value I set it, after the user sets it beyond the maximum value? Maybe when the user clicks outside that input?
Here is my code
<input type="number" name="days" id="days" min="1" max="365" value="<?php echo $ipq[0]['valueParam']?>">
You might want to consider using a range control along with the value of the range being shown in a span element next to it. This way only the value range you specify is allowed (which is really what the range control is for).
const output = document.getElementById("output");
document.getElementById("days").addEventListener("input", function(){
output.textContent = this.value;
});
<input type="range" name="days" id="days" min="1" max="365" value="1"><span id="output">1</span>
The max attribute is validated on form submit. AS you can see in the snippet below the user will get a message when he tries to submit the form.
<form>
<input type="number" name="days" id="days" min="1" max="365" value="366">
<input type='submit'>
</form>
If you want to prevent the user for inputting a value over 365 you can use js to do that. The snippet below shows how to prevent values over 365 for all number inputs.
document.querySelectorAll('input[type="number"]').forEach((el) => el.addEventListener('input', (e) => {
let inputEl = e.currentTarget;
if(parseFloat(inputEl.value) > parseFloat(inputEl.max)) {
inputEl.value = inputEl.max;
}
}));
<form>
<input type="number" name="days" id="days" min="1" max="365" value="366">
<input type='submit'>
</form>
I have 2 set of input types of text boxes. 2 fields on each. I am trying to calculate and compare each set individually in single page.
The input types have different ids.
<input type="text" id="tmcp_textfield_1" name="blueberry"
placeholder="blueberry" value="0" onkeydown="calculate()"
onkeyup="calculate()">
<input type="text" id="tmcp_textfield_2" name="plums" placeholder="plums" value="0"
onkeydown="calculate()" onkeyup="calculate()">
<input type="text" id="a3" name="a3" placeholder="a3" value="0">
<br>second set below<br>
<input type="text" id="tmcp_textfield_3" name="blueberry"
placeholder="blueberry" value="0" onkeydown="calculate()"
onkeyup="calculate()">
<input type="text" id="tmcp_textfield_4" name="plums" placeholder="plums" value="0"
onkeydown="calculate()" onkeyup="calculate()">
<input type="text" id="a3`" name="a3" placeholder="a3" value="0">
My javascript in header:
For First set:
<script type="text/javascript">
calculate = function() {
var blueb = parseFloat($('#tmcp_textfield_1').val());//document.getElementById('blueberry').value;
var plumsb = parseFloat($('#tmcp_textfield_2').val());//document.getElementById('plums').value;
var thetotal = /*document.getElementById('a3').value =*/ parseInt(blueb)+parseInt(plumsb);
if (thetotal > 6) {
$('#tmcp_textfield_2').val('');
$('#tmcp_textfield_1').val('');
alert('Combination must be below 6');
}
}
</script>
For Second Set:
<script type="text/javascript">
calculate = function() {
var blueb = parseFloat($('#tmcp_textfield_3').val());//document.getElementById('blueberry').value;
var plumsb = parseFloat($('#tmcp_textfield_4').val());//document.getElementById('plums').value;
var thetotal = /*document.getElementById('a3').value =*/ parseInt(blueb)+parseInt(plumsb);
if (thetotal > 12){
$('#tmcp_textfield_4').val('');
$('#tmcp_textfield_3').val('');
alert('Combination must be below 12');
}
}
</script>
The problem only the first set of calculation work. When i remove the first set of javascript then the second set only work and vise versa.
How could i differentiate the sets in javascript so that both the set of inputs work together in one single html page.
Problem:
You are having same name functions "calculate()" for both sets that's why only 1 is working at a time.
Solution:
Rename the function name to different names like calculateOne() and calculateTwo() then both will work.
Hope this helps
I have a dynamic table that creates the amount of rows based on the user selection. Each row in the table then has input boxes for numbers. If I have a table with 7 rows for example, I want to store those 7 different inputs into an array. So far I am trying to pass the input of the textbox to a function which updates declared blank arrays. So something like this
HTML
<td id="{{'redScore'+($index+1)}}">
<input required="" ng-change="updateRedScore(inputValue)" ng-model="inputValue" type="number" step="1" name="rate" min="1" max="10"> </td>
Script
$scope.redRoundScore = [];
$scope.inputValue = null;
$scope.updateRedScore = function(passedscore){
$scope.redRoundScore[index] = passedscore
}
Is there a way I can pass the index alongside the inputValue to updateRedScore?
In the interest of completing this question/answer that may help others in the future, adding $index as a parameter to the method should work. Also, the $scope.inputValue = null; is not needed since the inputValue variable only exists on the scope that is created for the ng-repeat.
HTML:
<td id="{{'redScore'+($index+1)}}">
<input required
ng-change="updateRedScore(inputValue, $index)"
ng-model="inputValue"
type="number"
step="1"
name="rate"
min="1"
max="10">
</td>
JS:
$scope.redRoundScore = [];
$scope.updateRedScore = function(passedscore, index) {
$scope.redRoundScore[index] = passedscore
}
I have an input field (type = number) and a label. I am trying to set the max attribute of the input field to the value of the label.
I have tried in different ways to no avail:
1)
<input id="Input1" type="number" step="any" min="1" max='<%#Convert.ToDecimal(Label1.InnerText) %>'>
2)
function setMaxTonnes() {
var input = document.getElementById("<%= Input1.ClientID %>");
var maxValue = document.getElementById("<%= Label1.ClientID %>").innerText;
input.setAttribute("max", maxValue);
}
<input type="number" step="any" min="1" onfocus="setMaxTonnes()">
There are no errors which return with either of these efforts but it doesn't prevent me from entering a value greater than the value stored in Label1.
Any ideas where I am going wrong?
Are you sure the asp variable is corrected output in the compiled markup? Try to inspect with DevTools if the input element actually gets your max value.
Your example looks accurate, <input type="number" step="any" min="1" max="12"> does work fine.
I’m trying to figure out how to store JavaScript slider values as variables, to use later on for d3.js.
In the head of my html doc I have 6 sliders, each which displays 0-100 value.
I want to assign the slider values as variables – one variable for each slider. At each point in time, of course, each slider will only have one value.
But the idea is that I can change the slider position to change the slider value, and then hit an update button and then the newer slider values will become the new variable values.
I’ve tried a variety of different naming methods but none seems to be the right syntax.
What I am caught up on, is how to refer to the (slider) form by id or name or input id, which is html, when I create JavaScript variables for the values that are selected using the sliders.
Any ideas on how I can get this to work?
I searched online and could not readily find a solution on how to do this, or even a template to go off of. Any suggestions are welcome. Thanks!
Code is posted below (I took away my non-working attempts and replaced with hard coded values as an example for what slider positions could look like):
<p>
<form name = "weight1" id = "weight1" >
<text><b> weight1 </b></text> <input id="weight1" input type="range" name="weight1" min="0" max="100" value="0" step="1" onchange="showValue(this)" />
<span id="range">0</span>
<script type="text/javascript">
function get_nextsibling(n) {
x=n.nextSibling;
while (x.nodeType!=1) {
x=x.nextSibling; }
return x; }
function showValue(self) {
get_nextsibling(self).innerHTML=self.value; }
</script>
</form>
<form name = "weight2" id = "weight2" >
<text><b> weight2 </b></text> <input id="weight2" input type="range" name="weight2" min="0" max="100" value="0" step="1" onchange="showValue(this)" />
<span id="range">0</span>
</form>
<form name = "weight3" id = "weight3" >
<text><b> weight3 </b></text> <input id="weight3" input type="range" name="weight3" min="0" max="100" value="0" step="1" onchange="showValue(this)" />
<span id="range">0</span>
</form>
<form name = "weight4" id = "weight4" >
<text><b> weight4 </b></text> <input id="weight4" input type="range" name="weight4" min="0" max="100" value="0" step="1" onchange="showValue(this)" />
<span id="range">0</span>
</form>
<form name = "weight5" id = "weight5" >
<text><b> weight5 </b></text> <input id="weight5" input type="range" name="weight5" min="0" max="100" value="0" step="1" onchange="showValue(this)" />
<span id="range">0</span>
</form>
<form name = "weight6" id = "weight6" >
<text><b> weight6 </b></text> <input id="weight6" input type="range" name="weight6" min="0" max="100" value="0" step="1" onchange="showValue(this)" />
<span id="range">0</span>
</form>
</p>
<script type="text/javascript">
//put JavaScript function that makes each slider a variable, or just assign slider values directly to variables if easier...then use in body
var weightfactor1 = 0 ; //want this variable to be the form output value instead of hard coded values between 0-100 ...so weight1 slider
var weightfactor2 = 100 ; //want this variable to be weight2 slider value
var weightfactor3 = 10 ; //want this variable to be weight3 slider value
var weightfactor4 = 100 ; // " "" weight4
var weightfactor5 = 12 ; // " "" weight5
var weightfactor6 = 100 ; // " "" weight6
</script>
See: http://jsbin.com/ISekuSiN/5 for an example of the working sliders (solution that was provided to a prior question I had about this, Displaying values from multiple JavaScript slider values )
Couple of suggestions:
Make sure your html has been rendered before running your JavaScript
For the case above case you can use the document object as follows:
var weightFactor1 = document.getElementById("weight1").value;