How to display input value on the website? I already tried to display it but when I change the value of the input, the display is still the same.
const rangeInput = document.querySelector(".range");
const valueInp = document.querySelector(".value");
valueInp.innerHTML = rangeInput.value;
<input type="range" min="1" max="100" value="1" step="1" class="range"/>
<p class="value"></p>
What you did puts the value of the input in the paragraphe on load. Plus you need an EventListener in order to track the input changes, like so:
const rangeInput = document.querySelector(".range");
const valueInp = document.querySelector(".value");
valueInp.innerHTML = rangeInput.value;
rangeInput.addEventListener("input", ()=>{
valueInp.innerHTML = rangeInput.value;
})
<input type="range" min="1" max="100" value="1" step="1" class="range"/>
<p class="value"></p>
const rangeInput = document.querySelector(".range");
const valueInp = document.querySelector(".value");
rangeInput.addEventListener("input", () => {
valueInp.textContent = rangeInput.value;
});
valueInp.textContent = rangeInput.value;
<input type="range" min="1" max="100" value="1" step="1" class="range"/>
<p class="value"></p>```
Provided that the <p> element for the value will always be following directly after your range element then the following script will take care of any number of range/value combinations:
document.querySelectorAll(".range")
.forEach(r=>r.addEventListener("input",update(r)));
function update(r){
const ur= ()=>r.nextElementSibling.textContent=r.value;
ur();
return ur;
}
<input type="range" min="1" max="100" value="40" step="1" class="range"/>
<p></p>
<input type="range" min="1" max="100" value="20" step="1" class="range"/>
<p></p>
<input type="range" min="1" max="100" value="30" step="1" class="range"/>
<p></p>
Try this :
<input type="range" min="1" max="100" value="1" step="1" class="range"/>
<p class="value"></p>
const rangeInput = document.querySelector(".range");
const valueInp = document.querySelector(".value");
range.addEventListener("change",()=>{
valueInp.innerHTML = rangeInput.value;
})
valueInp.innerHTML = rangeInput.value;
addEventListener here will be executed whenever value inside input tag is changed .
You need to wire-up an event-listener on the <input/> which then updates the <p class="value"> in the event-handler.
You can only wire-up event-handlers after DOMContentLoaded btw.
There are two main events you can listen to:
Use the 'input' event to respond to every change-in-value, even while the <input> element has focus.
Use the 'change' event to only respond to changes when the user has stopped interacting with the input.
BTW, you should use an <output> element instead of <p> for showing "output" values.
You should use id to select specific elements instead of .className selectors because class="" is not unique.
Never use innerHTML for showing text as it opens you up to XSS attacks.
For <output> you can set HTMLOutputElement.value.
For all other elements, use textContent.
Or innerText.
Like so:
window.addEventListener( 'DOMContentLoaded', onDomLoaded );
function onDomLoaded() {
const rangeInput = document.getElementById('myRangeInput');
const output = document.getElementById('myOutput');
// Show initial value immediately:
output.textContent = rangeInput.value;
// 'input' is the name of the event-type, not the <input> element name.
// you can also use 'change' instead.
rangeInput.addEventListener( 'input', e => {
output.textContent = rangeInput.value;
} );
}
<input id="myRangeInput" type="range" min="1" max="100" value="1" step="1" class="range"/>
<output id="myOutput" for="myRangeInput"></output>
If you want something really succinct, then just update the <output> dire use a named <output> the oninput="" attribute, like so:
<input id="myRangeInput" type="range" min="1" max="100" value="1" step="1" oninput="document.getElementById('myOutput').value = this.value;" />
<output id="myOutput" for="myRangeInput"></output>
Related
I have a form where the inputs values are controlled by range sliders. There's a calculation every time there's a new entry on each input which operates on focusout.
Though, the calculation doesn't work when only the range sliders are used. Is there a way to focus the inputs while using the range sliders? I can't change the way of calculation, because, it's on all the inputs. So, it has to be this way.
My form is bigger, but, here's an example of what I have:
<label class="va1">Option a price 1:<input id="a1" type="number"/></label>
<input type="range" id="slider-a1" min="0" max="100" step="1" value="0"><br>
<label class="va2">Option a price 2:<input id="a2" type="number"/></label>
<input type="range" id="slider-a2" min="0" max="100" step="1" value="0"><br>
<label>Result:</label><input id="a5" type="text" name="total_amt"/>
And here's the JS:
var opt_1 = document.getElementById("slider-a1");
opt_1.oninput = function() {
document.getElementById("a1").value = opt_1.value;}
var opt_2 = document.getElementById("slider-a2");
opt_2.oninput = function() {
document.getElementById("a2").value = opt_2.value;}
calculate = function(){
var optiona1, optiona2, resultss;
optiona1 = Number(document.getElementById("a1").value);
optiona2 = Number(document.getElementById("a2").value);
resultss = parseInt(optiona1)+parseInt(optiona2);
document.getElementById('a5').value = resultss;}
$('input[type=number]').on('focusout', calculate);
How do I make these two input range fields balance to maximum 100, that when I move the first input field range the second should be adjusting too, vice versa. I mean that it should be proportional both sides like balance scale.
Here is my code https://jsfiddle.net/jsm4s2oz/1/
//First input range
<output name="judge_rangeOutput" id="judge_rangeOutput">75</output>
<input type="range" name="judge_range" id="judge_range" min="0" max="100" value="75" oninput="judge_rangeOutput.value = judge_range.value"><br/>
//Second input range
<output name="preJudge_rangeOutput" id="preJudge_rangeOutput">25</output>
<input type="range" name="prejudges_range" id="prejudges_range" min="0" max="100" value="25" oninput="preJudge_rangeOutput.value = prejudges_range.value ">
In your input handler, in addition to changing the <output> field for the same slider, also change the value of the other slider and the other <output> to 100 - this.value.
$("#judge_range").on("input", function() {
$("#judge_rangeOutput").val(this.value);
$("#prejudges_range").val(100 - this.value);
$("#preJudge_rangeOutput").val(100 - this.value);
});
$("#prejudges_range").on("input", function() {
$("#preJudge_rangeOutput").val(this.value);
$("#judge_range").val(100 - this.value);
$("#judge_rangeOutput").val(100 - this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
First input range
<output name="judge_rangeOutput" id="judge_rangeOutput">75</output>
<input type="range" name="judge_range" id="judge_range" min="0" max="100" value="75">
<br/>Second input range
<output name="preJudge_rangeOutput" id="preJudge_rangeOutput">25</output>
<input type="range" name="prejudges_range" id="prejudges_range" min="0" max="100" value="25">
I'm learning JS by making a character sheet (rpg), I got a form set up like this
<fieldset id="char-int">
<label for="int">INT</label>
<input id="int" name="int" placeholder="40" type="number" min="0" max="100">
<input id="int-hard" name="int-hard" placeholder="20" type="number" min="0" max="100">
<input id="int-extr" name="int-extr" placeholder="6" type="number" min="0" max="100">
</fieldset>
I need to change the value in int-hard and int-extr with simple rounded down division.
window.onchange = changevalue;
function changevalue() {
var hardRoll = document.getElementById("int").value / 2;
var extrRoll = document.getElementById("int").value / 5;
var setStat = document.getElementById("str-hard").value = Math.floor(hardRoll);
var setStat = document.getElementById("str-extr").value = Math.floor(extrRoll);
This works, but there must be a smarter way to do this as I got multiple IDs I want to do the same stuff to like STR, DEX etc..
You can remove the ids from your inputs and work within the context of your fieldset, like this:
<fieldset id="char-int">
<label>
INT
<input name="int" placeholder="40" type="number" min="0" max="100">
</label>
<input name="int-hard" placeholder="20" type="number" min="0" max="100">
<input name="int-extr" placeholder="6" type="number" min="0" max="100">
</fieldset>
function changevalue() {
var fieldset = document.getElementById("char-int");
var intField = fieldset.querySelector('["name=int"]');
var intHardField = fieldset.querySelector('["name=int-hard"]');
var intExtrField = fieldset.querySelector('["name=int-extr"]');
// ...
}
(Note that I also moved your name="int" field into the label so we don't have to use an id to link them.)
querySelector finds the first element within the element you call it on that matches the given CSS selector. (There's also querySelectorAll, which finds a list of all matching elements.)
Depending on how much you can parameterize the actual logic of the changevalue function, you could change the names to not have int- in them (or add classes), and then pass in the id of the fieldset (or the fieldset instance itself).
<fieldset id="char-int">
<label>
INT
<input id="int-main" name="main" placeholder="40" type="number" min="0" max="100">
</label>
<input name="hard" placeholder="20" type="number" min="0" max="100">
<input name="extr" placeholder="6" type="number" min="0" max="100">
</fieldset>
function changevalue(fieldSetId) {
var fieldset = document.getElementById(fieldSetId);
var mainField = fieldset.querySelector('["name=main"]');
var hardField = fieldset.querySelector('["name=hard"]');
var extrField = fieldset.querySelector('["name=extr"]');
// ...
}
QS and QSA are supported by all modern browsers, and also IE8.
I got multiple IDs I want to do the same stuff ...
When you here such a phrase, it can be a sign that you need to use classes. They are used exactly for this: to denote group of similar elements.
So what you should do is to add the same class to all elements, then select all necessary elements, and then use for loop to process all of them.
For example, HTML:
<input class="int" name="int" placeholder="40" type="number" min="0" max="100">
<input class="int-hard" name="int-hard" placeholder="20" type="number" min="0" max="100">
<input class="int-extr" name="int-extr" placeholder="6" type="number" min="0" max="100">
and then javascript:
var int = document.querySelectorAll('.int');
for (var i = 0; i < int; i++) {
var hardRoll = int[i].value / 2;
var extrRoll = int[i].value / 5;
}
Try this solution:
// Your inputs, selected by ID
var inputs = document.querySelectorAll("#int-hard, #int-extr");
// Apply onchange to selected input fields
for(var i = 0, length = inputs.length; i < length; i++) {
inputs[i].onchange = function() {
this.value = Math.floor(this.value);
};
}
And please don't use window.onchange as this fires off to every change in your document.
I want to create a slider showing decimal values like 0.0 to 0.1 using html or html5.
Add step="0.1" in your input range tag like this: <input type="range" min="0.1" max="1.0" step="0.1" value="1"> Example:
document.getElementById("scale").oninput = function() {
document.getElementById("spanscale").innerHTML = this.value;
}
<input type="range" min="0.1" max="3.0" step="0.1" value="1" id="scale">Scale:<text id="spanscale" style="inline">1</text>
If you want to show a decimal place in integer numbers you can add this piece of code in the value output: Number(this.value).toFixed(1)
document.getElementById("scale").oninput = function() {
document.getElementById("spanscale").innerHTML = Number(this.value).toFixed(1);
}
<input type="range" min="0.1" max="3.0" step="0.1" value="1.0" id="scale">Scale:<text id="spanscale" style="inline">1.0</text>
It sounds like you want an input field that the user can click arrows to increment/decrement a value in steps of 0.1. If that's the case, you want to use an HTML5 numeric input element:
<input type="number" min="0" max="1" step="0.1" value="0.5" />
Find out more here at HTML5 Goodies.
As you precise HTML5, then you can use the new input type range :
<input type="range" name="things" min="1" max="10">
Demonstration
Be aware that it doesn't work on IE9-,though.
For setting this dynamically using JavaScript:
document.getElementById("my_slider").setAttribute("step", "0.1");
I have a slider (input type range) that is supposed to run a function when the value is being changed. The function should then display the new value in a separate div container. After placing an alert in the function, I know that the function isn't being called, but after googling for an hour and trying a few different methods I just can't find the error.
Here's the HTML part:
<input id="slide" type="range" min="1" max="100" step="1" value="10" onchange="updateSlider(this.value)">
<div id="sliderAmount"></div>
JavaScript:
// Slider
function updateSlider(slideAmount)
{
alert("error");
var sliderDiv = document.getElementById("sliderAmount");
sliderDiv.innerHTML = slideAmount;
}
It works, you just need to make sure that the JavaScript function is defined when the element is rendered, for example:
<script>
function updateSlider(slideAmount) {
var sliderDiv = document.getElementById("sliderAmount");
sliderDiv.innerHTML = slideAmount;
}
</script>
<input id="slide" type="range" min="1" max="100" step="1" value="10" onchange="updateSlider(this.value)">
<div id="sliderAmount"></div>
See this demo: https://jsfiddle.net/Mmgxg/
A better way would be to remove the inline onchange attribute:
<input id="slide" type="range" min="1" max="100" step="1" value="10">
<div id="sliderAmount"></div>
And then add the listener in your JavaScript code:
var slide = document.getElementById('slide'),
sliderDiv = document.getElementById("sliderAmount");
slide.onchange = function() {
sliderDiv.innerHTML = this.value;
}
https://jsfiddle.net/PPBUJ/