I'm a complete newbie to Javascript, I have taken a demo html slider and everything is working OK;
var slider = document.getElementById("myRange");
var output = document.getElementById("first");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
<div class="slidecontainer">
<input type="range" min="50" max="<?php echo round($widthhugemm); ?>" value="50" class="slider" id="myRange">
<p>
Size: <span id="first"></span>mm
</p>
</div>
I now want to generate a second value from the slider value, this value will be dependant on the selected value - so not a second slider handle - I want to perform a simple multiplication from a variable and output that to a second span ID like this;
Size: <span id="first"></span>mm x <span id="second">mm</span>
I've been able to create a second output by duplicating the getElementByID by creating new variables and span IDs, I just cannot work out how to perform a multiplication on the initial slider value and create a new value (variable) with the answer and output it.
I hope all that makes sense and thanks in advance for any help provided!
The HTML5 range input only accepts one input!
You can use something like the jQuery UI range slider for that task.
In this way you can understand exactly how it works since you are a junior, but it is certainly not the more optimised way!
var slider = document.getElementById("myRange");
var first = document.getElementById("first");
var second = document.getElementById("second");
first.innerHTML = slider.value;
second.innerHTML = slider.value * 2;
slider.oninput = function() {
first.innerHTML = this.value;
second.innerHTML = this.value * 2;
}
<div class="slidecontainer">
<input type="range" min="50" max="<?php echo round($widthhugemm); ?>" value="50" class="slider" id="myRange">
<p>
Size: <span id="first"></span>mm * <span id="second"></span>mm
</p>
</div>
I came up with this:
<input type="range" name="range" min="50" max="100" id="range" /><br>
<span id="first"></span> x <span id="second"></span>
<script type="text/javascript">
var r = document.getElementById('range');
var first = document.getElementById('first');
var sec = document.getElementById('second');
flag = true;
r.oninput = function(){
first.innerHTML = this.value;
second.innerHTML = this.value;
}
</script>
Then I guess you would just need this
Related
I have code that looks something like below. When I hit the reset button, I want my paragraph element to update to the default slider values, but they stay at the same value from before the reset. How can I make it so that the paragraph element reflects the reset slider value?
JSFiddle Link: https://jsfiddle.net/apshah/f6ymkcLe/
HTML:
<div class ='slidercontainer' id='slidercontainer'>
<form action method="POST" class="sliderform" id="sliderform">
<div class = "divslider" id="slider1">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange1">
<p>
<span class="sVal" id="val1">50</span>
</p>
</div>
<div class = "divslider" id="slider2">
<input type="range" min="1" max="10" value="5" class="slider" id="myRange2">
<p>
<span class="sVal" id="val2">5</span>
</p>
</div>
</form>
<div class="space1"></div>
<div class='buttonbox'>
<button type="submit" form="sliderform" class="sliderbutton" id="accept">Accept</button>
<button type="reset" form="sliderform" class="sliderbutton" id="reset">Reset</button>
<div class="space2"></div>
</div>
</div>
JavaScript:
document.body.onload = function(){
runSlider("myRange1", 'val1')
runSlider('myRange2', 'val2')
}
function runSlider(inputID, pID){
var slider = document.getElementById(inputID);
var output = document.getElementById(pID);
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
}
You should add another listener for this. I used setTimeout because of async.
document.body.onload = function(){
runSlider("myRange1", 'val1')
runSlider('myRange2', 'val2')
registerFormEvent()
}
function registerFormEvent() {
const formEl = document.querySelector(".sliderform");
const onFormReset = function(){
setTimeout(() => {
document.querySelector("#val1").innerHTML = document.querySelector("#myRange1").value;
document.querySelector("#val2").innerHTML = document.querySelector("#myRange2").value;
}, 0)
}
formEl.addEventListener("reset", onFormReset)
}
function runSlider(inputID, pID){
var slider = document.getElementById(inputID);
var output = document.getElementById(pID);
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
}
I've been working on this calculator and it's working in the sense it's correctly calculating the price of the field and displaying it. The problem though is that it appears to append the correct answer to another value (presumably taken from the data-price as they correlate).
Here's the code I have for it:
var updateTotal = function() {
var sumtotal;
var sum = 0;
//Add each product price to total
$(".extraproduct").each(function() {
var extra_price = $(this).data('price');
var quantity = $('.extraQuantity', this).val();
//Total for one product
var subtotal = extra_price*quantity;
//Round to 2 decimal places.
subtotal = subtotal.toFixed(2);
//Display subtotal in HTML element
$('.productTotal', this).html(subtotal);
});
// total
$('.productTotal').each(function() {
sum += Number($(this).html());
});
$('#sum').html(sum.toFixed(2));
};
//Update total when quantity changes
$(".extraQuantity").bind("keyup change", function() {
updateTotal();
});
//Update totals when page first loads
updateTotal();
// set this from local
$('span.productTotal').each(function() {
$(this).before("£")
});
// unit price
$('.extraproduct span').each(function() {
var $price = $(this).parents("div").data('price');
$(this).before($price);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<span class="quote-label">Product 1</span>
<div class="input-wrap currency extraproduct" data-price="450.00">
<input type="number" class="extraQuantity" value="0" min="1" max="20" />
<span class="productTotal"></span>
</div>
<span class="quote-label">Product 2</span>
<div class="input-wrap currency extraproduct" data-price="10.00">
<input type="number" class="extraQuantity" value="0" min="1" max="20" />
<span class="productTotal"></span>
</div>
<span class="quote-label">Additional Product</span>
<div class="input-wrap checkbox-wrap extraproduct" data-price="5.00"><input type="checkbox" class="extraQuantity" value="0" />
<span class="productTotal"></span>
</div>
<div id="total">Total: £<span id="sum">0.00</span> </div>
https://jsfiddle.net/DigitalAdam/5fLb0vnp/26/
I thought it could be to do with the subtotal.toFixed part but had no luck when adjusting or removing that. Any help is appreciated.
Regards
Very Simple solution:
you are just using the .productTotal spans to calculate something. You could just set the display to none. It can still be used for calculations but it will now show:
.productTotal {
display: none;
}
im working on a slider in html, that will show different images depending on the slider value.
so if the slider is set to value 1, image1.jpg is shown, value 2 will show image2.jpg and so on.
I have found the slider part on w3schools and has managed to output new images to it. link to w3schools slider
But i dont know how to refresh the images, for now the code just prints a new one by the olds images side. i++
does anyone know how to refresh image, instead of printing a one new every time.
Any help would be appreciated!
var slider = document.getElementById("myRange");
var output = document.getElementById("value");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
var x = document.createElement("IMG");
x.setAttribute("src", "image" + this.value + ".jpg");
document.body.appendChild(x);
}
<div class="slidecontainer">
<input type="range" min="1" max="2" value="1" class="slider" id="myRange">
<p>Value: <span id="value"></span></p>
</div>
You can just use the img element with the default image or src value:
var slider = document.getElementById("myRange");
var output = document.getElementById("value");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
var img = document.getElementById("img");
img.setAttribute("src", "https://loremflickr.com/320/240/" + this.value);
}
<div class="slidecontainer">
<input type="range" min="1" max="5" value="1" class="slider" id="myRange">
<p>Value: <span id="value"></span></p>
<img src="https://loremflickr.com/320/240/1" alt="" id="img">
</div>
I am having trouble displaying a math function, there is nothing stated wrong in the console, so I do not know where I am going wrong. the output does not display the correct answer here...
Desired outcome: enter number in each input, and javascript multiplies those two input values then displays the result when you click the button.
var money = document.getElementById('money').value;
var years = document.getElementById('years').value;
var output = document.getElementById('output');
var myOutput = money * years;
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
output.innerHTML = myOutput;
})
<body>
<h4>how much money do you make a year?</h4>
<input id="money" type="number" placeholder="$$$"></input>
<input id="years" type="number" placeholder="years"></input>
<div id="output">
</div>
<button id="btn" type="button">go</button>
</body>
I would structure it like this:
const btn = document.getElementById('btn');
const money = document.getElementById('money');
const years = document.getElementById('years');
const output = document.getElementById('output');
btn.addEventListener('click', () => {
output.innerHTML = Number(money.value) * Number(years.value);
})
<body>
<h4>how much money do you make a year?</h4>
<input id="money" type="number" placeholder="$$$"></input>
<input id="years" type="number" placeholder="years"></input>
<div id="output">
</div>
<button id="btn" type="button">go</button>
</body>
As others have said, you need to move the logic inside the click handler. (In your code as it's structured, you get the two values once, at the load of the script and never update them.)
I have also broken out the searching of the DOM nodes from the calculation; it's probably a good practice for anytime such changes can happen more than once.
Finally, I converted the String values you'll get from the form elements into numbers before doing any work with them. This is generally necessary, although because of some Javascript magic, you don't actually have to do it here. (Try changing from multiplication to addition to see the dangers of forgetting this.)
When you init your application, your input fields don't have any value filled yet.
var money = document.getElementById('money');
var years = document.getElementById('years');
var output = document.getElementById('output');
const btn = document.getElementById('btn');
function calc(val1, val2) {
return Number(val1.value) * Number(val2.value);
}
btn.addEventListener('click', (e) => {
output.innerHTML = calc(money, years);
});
<body>
<h4>how much money do you make a year?</h4>
<input id="money" type="number" placeholder="$$$"></input>
<input id="years" type="number" placeholder="years"></input>
<div id="output">
</div>
<button id="btn" type="button">go</button>
</body>
You need to set the innerHTML of the element. You want to get the user input values after the click of the button. Therefore, you move your variables inside the callback function
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
var money = document.getElementById('money').value;
var years = document.getElementById('years').value;
var output = document.getElementById('output');
output.innerHTML = money * years;
})
<body>
<h4>how much money do you make a year?</h4>
<input id="money" type="number" placeholder="$$$"></input>
<input id="years" type="number" placeholder="years"></input>
<div id="output">
</div>
<button id="btn" type="button">go</button>
</body>
Try this set inner html of div and have everything but the btn element happen on click:
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
var money = document.getElementById('money').value;
var years = document.getElementById('years').value;
var output = document.getElementById('output');
var myOutput = money * years;
output.innerHTML = myOutput;
})
<body>
<h4>how much money do you make a year?</h4>
<input id="money" type="number" placeholder="$$$"></input>
<input id="years" type="number" placeholder="years"></input>
<div id="output">
</div>
<button id="btn" type="button">go</button>
</body>
How do I combine outputs of the two functions to do some operations on the two values?
<div class="grid">
<h2>Adjust the level</h2>
<input
type="range"
name="points"
min="0"
max="10"
step="1"
onChange="xLevel(this.value)">
<input
type="range"
name="points"
min="0"
max="10"
step="1"
onChange="yLevel(this.value)">
<div id="output">
<p id="x"></p>
<p id="y"></p>
</div>
</div>
And the JS is:
var output = document.getElementById("output");
var xout = document.getElementById("x");
var yout = document.getElementById("y");
function xLevel(newVal) {
xout.innerHTML = newVal;
}
function yLevel(newVal) {
yout.innerHTML = newVal;
}
So how do I combine the two values, x and y, to eg. multiply them and display them in yet another div?
Thanks
Store the new values in their own variables in the top-level scope, and then manipulate them in a separate function.
var output = document.getElementById("output");
var xout = document.getElementById("x");
var yout = document.getElementById("y");
var multout = document.getElementById('mult');
var xval;
var yval;
function xLevel(newVal) {
xout.innerHTML = newVal;
xval = parseInt(newVal, 10); // casts it to a number
updateMultiplier();
}
function yLevel(newVal) {
yout.innerHTML = newVal;
yval = parseInt(newVal, 10); // casts it to a number
updateMultiplier();
}
function updateMultiplier() {
multout.innerHTML = yval * xval;
}
and then for your markup:
<div class="grid">
<h2>Adjust the level</h2>
<input
type="range"
name="points"
min="0"
max="10"
step="1"
onChange="xLevel(this.value)">
<input
type="range"
name="points"
min="0"
max="10"
step="1"
onChange="yLevel(this.value)">
<div id="output">
<p id="x"></p>
<p id="y"></p>
<p id="mult"></p>
</div>
</div>