I have a slider that live-updates the value on a label tag to the right of it. What should I do to prevent it from "jumping" when the value goes from 1-digit value to 2-digits value? How can I give the label a fixed position so that it won't change the layout:
var range = document.getElementById('range');
range.addEventListener('input', rangeChange);
function rangeChange() {
label.innerHTML = this.value;
}
<label id="label">0</label>
<input id="range" type="range" value=0 min=0 max=100>
Either add width: 20px;display: inline-block; to the label.
Or
Add a wrapper around both the elements and give them display: flex; align-items: center; style and width to the label.
var range = document.getElementById('range');
range.addEventListener('input', rangeChange);
function rangeChange() {
label.innerHTML = this.value;
}
<div style="display: flex; align-items: center;">
<label id="label" style="width: 20px;">0</label>
<input id="range" type="range" value=0 min=0 max=100>
</div>
Option 1: Put label to right side of slider
var range = document.getElementById('range');
range.addEventListener('input', rangeChange);
function rangeChange() {
label.innerHTML = this.value;
}
<input id="range" type="range" value=0 min=0 max=100>
<label id="label">0</label>
Option 2: Zero padding:
var range = document.getElementById('range');
range.addEventListener('input', rangeChange);
function rangeChange() {
var val = +(this.value);
if (10 > val) {
val = '00' + val;
} else if (100 > val) {
val = '0' + val;
}
label.innerHTML = val;
}
<label id="label">000</label>
<input id="range" type="range" value=0 min=0 max=100>
Related
I have created a code with 4 range slider that displays only its total in "$" symbol.
This total must not exceed 5 symbols in all 4 sliders.
The objective is that the customer will be able to have a visual appercus without knowing the amount how much his project will cost him.
Here is the code I have done so far.
<div id="container">
<label for="slider1">Titre 1</label>
<input type="range" id="slider1" min="0" max="5" value="0">
<br>
<label for="slider2">Titre 2</label>
<input type="range" id="slider2" min="0" max="5" value="0">
<br>
<label for="slider3">Titre 3</label>
<input type="range" id="slider3" min="0" max="5" value="0">
<br>
<label for="slider4">Titre 4</label>
<input type="range" id="slider4" min="0" max="5" value="0">
<br>
<div id="total">Total: <span id="dollar-signs"></span></div>
</div>
<style>
#container {
display: flex;
flex-direction: column;
}
label {
font-weight: bold;
}
#total {
font-weight: bold;
}
#total.exceeded {
color: red;
}
</style>
<script>
const sliders = document.querySelectorAll("#container input[type=range]");
function updateTotal() {
let total = 0;
sliders.forEach(slider => {
total += Number(slider.value);
});
const totalElement = document.getElementById("total");
const dollarSigns = document.getElementById("dollar-signs");
dollarSigns.innerHTML = "";
for (let i = 0; i < total; i++) {
if (i < 5) {
dollarSigns.innerHTML += "$";
}
}
if (total > 5) {
totalElement.classList.add("exceeded");
} else {
totalElement.classList.remove("exceeded");
}
}
sliders.forEach(slider => {
slider.addEventListener("input", updateTotal);
});
updateTotal();
</script>
I would like someone to help me debug my script to allow the 4 slider to display a maximum of 5 $ sybols.
Currently it does it but not correctly if my 4 sliders are at their maximum it must be 5 symbols.
I am trying to make a calculator in javascript and it is not working. When I try to do, say 1 + 1 it gives me 11 and this is the same for all the numbers here is my code:
var slider1 = document.getElementById("myRange1");
var slider2 = document.getElementById("myRange2");
var output = document.getElementById("output");
var fullEquat = document.getElementById("equation");
var add1 = slider1.value;
var add2 = slider2.value;
output.innerHTML = slider1.value; // Display the default slider value
// Update the current slider value (each time you drag the slider handle)
slider1.oninput = function() {
output.innerHTML = this.value;
}
slider2.oninput = function() {
add1 = slider1.value;
add2 = slider2.value;
equals = add1 + add2;
fullEquat.innerHTML = slider1.value + "+" + slider2.value + "=" + equals;
}
slider1.oninput = function() {
add1 = slider1.value;
add2 = slider2.value;
equals = add1 + add2;
fullEquat.innerHTML = slider1.value + "+" + slider2.value + "=" + equals;
}
.slider {
width: 400px;
display: inline;
}
.equal {
text-align: center;
font-size: 100pt;
margin: 0 0 0 0;
}
<div class="slidecontainer">
<input type="range" min="0" max="1000" value="500" class="slider" id="myRange1">
+
<input type="range" min="0" max="1000" value="500" class="slider" id="myRange2">
</div>
<p class="equal">=</p>
<p id="output" class="output"></p>
<p id="equation" class="equat"> + = </p>
When you declared add1 = slider1.value; add2 = slider2.value; you got a string instead of a number... you should put them inside a Number() like this
add1 = Number(slider1.value);
add2 = Number(slider2.value);
Value property returns you a string, you can use a simple trick to multiply it with 1 like add1 = slider. value * 1. and it will give you a number
.value property return a string
you have to use .valueAsNumber to get a number
sample code:
const calcForm = document.forms['form-calculation']
, pOutput = document.getElementById('p-output')
;
calcForm.oninput=_=>
{
calcForm['range-1'].nextElementSibling.textContent = calcForm['range-1'].value
calcForm['range-2'].nextElementSibling.textContent = calcForm['range-2'].value
pOutput.textContent = calcForm['range-1'].valueAsNumber
+ calcForm['range-2'].valueAsNumber
}
form { width: 20em; }
input[type="range"] {width: 80%; }
label { font-size:2em; font-weight: bold; text-align: center; display: block; width: 80%;}
<form name="form-calculation">
<input type="range" min="0" max="1000" value="500" name="range-1"><span>500</span>
<label>+</label>
<input type="range" min="0" max="1000" value="500" name="range-2"><span>500</span>
<label>=</label>
</form>
<p id="p-output" class="output">1000</p>
I have made a color changer. but now I want to add a form to it.
if you change the dropdown it must show the color change directly.
what is the best way to do this?
Below I have added my code for the color changer
$im = b.gif;
$index = imagecolorclosest ( $im, 128,128,128); // old color
imagecolorset($im,$index,$color[0],$color[1],$color[2]); // new color
$imgname = "result.gif";
imagegif($im, $imgname ); // save image as gif
imagedestroy($im);
If you do not want to use <input type="color" />, you could use 3 <input type="range"> add change listeners to them and update the style of element you wish whenever one of them is changed. (The event change will trigger after you release the input, the event input will trigger whenever the value is changed, even if you are still holding the input). I made the coloring gets and sets using Object.defineProperty to make it easier to test.
["red", "green", "blue", "opacity"].forEach(function(colorType) {
Object.defineProperty(this, colorType, {
get: function() {
return +document.querySelector("#" + colorType).value;
}
});
document.querySelector("#" + colorType).addEventListener("input", onChange);
});
Object.defineProperty(this, "result", {
set: function(newColor) {
document.querySelector("#result").setAttribute("style", "background-color: rgba(" + newColor + ");");
}
});
onChange();
function onChange() {
result = [red, green, blue, opacity].join(", ");
}
#result {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<form id="result">
<input type="range" id="red" name="red" min="0" max="255" />
<input type="range" id="green" name="green" min="0" max="255" />
<input type="range" id="blue" name="blue" min="0" max="255" />
<input type="range" id="opacity" name="opacity" min="0" max="1" step="0.01" />
</form>
Object.defineProperty(this, "color", {
get: function() {
return document.querySelector("#color").value;
}
});
document.querySelector("#color").addEventListener("input", onChange);
Object.defineProperty(this, "result", {
set: function(newColor) {
document.querySelector("#result").setAttribute("style", "background-color: " + newColor + ";");
}
});
onChange();
function onChange() {
result = color;
}
#result {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<form id="result">
<input type="color" id="color" name="color" />
</form>
I started to learn javascript 2 weeks ago. I want to do my first program which counts all prices from checked input.
But i dont have idea how to do this.
I found something on internet and stackoverflow, but i dont know to do this for my inputs.
Could you help me?
My code
// this function counts all the values
function showPrice() {
var priceOne = document.getElementsByName('price1');
var priceTwo = document.getElementsByName('price2');
var priceThree = document.getElementsByName('price3');
}
You can do this by getting a list of elements for all the inputs, check the ones that are checked, get their values, convert them to numbers and sum them.
Beginning with a list of ids, use Array.map() to transform the list into a list of string ids (1 -> test1).
Then apply getElementById() to each id to get the HTML element.
Then from the element extract and convert the value if the input is checked, otherwise map the element to 0.
Use Array.reduce to sum the values.
Using getElementById, find your output span and set its innerHTML to the total.
function showPrice() {
const total = [1,2,3,4,5,6,7,8,9]
.map(id => `test${id}`)
.map(id => document.getElementById(id))
.map(el => el && el.checked ? Number(el.value) : 0)
.reduce((sum, value) => sum + value, 0);
document.getElementById('getPrice').innerHTML = total;
}
.priceInput {
display: block;
border: 1px solid black;
padding: 10px;
width: 300px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.priceOutput {
display: block;
border: 1px solid black;
padding: 10px;
width: 300px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
<div class="priceInput">
<p>Part 1</p>
<label for="test1">test1</label>
<input type="radio" name="price1" id="test1" value="10">
<label for="test2">test2</label>
<input type="radio" name="price1" id="test2" value="25">
<label for="test3">test3</label>
<input type="radio" name="price1" id="test3" value="12">
</div>
<div class="priceInput">
<p>Part 2</p>
<label for="test4">test4</label>
<input type="radio" name="price2" id="test4" value="5">
<label for="test5">test5</label>
<input type="radio" name="price2" id="test5" value="7">
<label for="test6">test6</label>
<input type="radio" name="price2" id="test6" value="2">
</div>
<div class="priceInput">
<p>Part 3</p>
<label for="test7">test7</label>
<input type="radio" name="price3" id="test7" value="250">
<label for="test8">test8</label>
<input type="radio" name="price3" id="test8" value="720">
<label for="test9">test9</label>
<input type="radio" name="price3" id="test9" value="410">
</div>
<br>
<div class="priceOutput">
<button onclick="showPrice()">Show Price</button>
<p>Your Price is : <span id="getPrice">0<!--Here i want to get price1(value) + price2(value) + price3(value)--></span> $</p>
</div>
By looking at your code, it seems that you want to get the option the user selected out of the radio buttons and not all radio buttons (referring to the getElementsByName). To do so, you can go over the nodeList returned and see if any of the elements have the checked property.
for(let i = 0; i < priceOne.length; i++){
if(priceOne[i].checked) {
//Get value of the price selected with .value
let priceOneValue = priceOne[i].value;
}
}
After doing this for all your input types, you can sum them up.
JO_VA here is my own code. Can you check it? It's easier for my understanding.
I found just 1 problem and it is : when i remove from HTML input tag "checked" and i klikn only for 1 or 2 radio options, it show NaN in paragraph for price.
BTW sorry for my english (i ussually dont use english language)
function showPrice(){
var pricePlace = document.getElementById("getPrice");
getVal1();
getVal2();
getVal3();
var InputNumber = Number(inputVal1) + Number(inputVal2) + Number(inputVal3);
pricePlace.innerHTML = InputNumber;
}
var inputVal1;
function getVal1(){
var a = document.getElementById("test1");
var b = document.getElementById("test2");
var c = document.getElementById("test3");
if (c.checked) {
inputVal1 = c.value;
}
if (b.checked) {
inputVal1 = b.value;
}
if (a.checked) {
inputVal1 = a.value;
}
}
var inputVal2;
function getVal2(){
var a = document.getElementById("test4");
var b = document.getElementById("test5");
var c = document.getElementById("test6");
if (c.checked) {
inputVal2 = c.value;
}
if (b.checked) {
inputVal2 = b.value;
}
if (a.checked) {
inputVal2 = a.value;
}
}
var inputVal3;
function getVal3(){
var a = document.getElementById("test7");
var b = document.getElementById("test8");
var c = document.getElementById("test9");
if (c.checked) {
inputVal3 = c.value;
}
if (b.checked) {
inputVal3 = b.value;
}
if (a.checked) {
inputVal3 = a.value;
}
}
Or you can check it in https://codepen.io/soorta/pen/gqEGyQ
Expected to $('input[type=range]').val() return empty value (If value='').
But, jQuery the return 50% of the (min+max) of the range input element.
https://jsfiddle.net/maheshwaghmare/f33Ljjty/
Any solutoin to detect empty value of input[type=range] element though jQuery?
Input type range Default return value is the range of the number ,not value of attribute .if you need ah value attr .try with attr('value')
$(document).ready(function() {
if(!$('.one').attr('value').trim() || !$('.two').attr('value').trim()){ // validate the attribute value
console.log('any one range attr value is empty')
}
var rangeOne = 'Defult One: ' + $('.one').val() + '<br/>';
var rangeTwo = 'Defult Two: ' + $('.two').val() + '<br/>';
$('.result').html( rangeOne + rangeTwo );
});
body {
padding: 5px;
}
label {
font-weight: bold;
}
input[type=text] {
width: 20em
}
p {
margin: 1em 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Range One <input class="one" min="768" step="1" max="1920" type="range" value=""> (min='768' step='1' max='1920' value='')<br/>
Range Two <input class="two" min="768" step="1" max="1920" type="range" value="800"> (min='768' step='1' max='1920' value='800')
<br/><br/><br/>
<span class="result"></span>