Jquery script isn't working in browser - javascript

I have tried to add a script from Stackoverflow that took ages to come by,
but it seems like the file is going against me, though it's working perfectly
fine in JSfiddle. http://jsfiddle.net/hqtsmayh/
<div data-role="page" id="page1">
<div data-role="header">
<h1>My page</h1>
</div>
<div role="main" class="ui-content">
<div id="mysliders">
<label for="slider-1">Slider:</label>
<input class="add" type="range" name="slider-1" id="slider-1" min="0" max="100" value="50" />
<label for="slider-2">Slider:</label>
<input class="add" type="range" name="slider-2" id="slider-2" min="0" max="100" value="40" />
<label for="slider-3">Slider:</label>
<input class="add" type="range" name="slider-3" id="slider-3" min="0" max="100" value="30" />
<label for="slider-4">Slider:</label>
<input class="add" type="range" name="slider-4" id="slider-4" min="0" max="100" value="65" />
<label for="slider-5">Slider:</label>
<input class="add" type="range" name="slider-5" id="slider-5" min="0" max="100" value="11" />
<label for="slider-6">Slider:</label>
<input class="add" type="range" name="slider-6" id="slider-6" min="0" max="100" value="90" />
</div>
<hr />
<p>Total: <strong id="total"></strong></p>
</div>
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div>
</div>
<script>
$(window).load(function(){
$(document).on("pagecreate", "#page1", function () {
$(".add").on("change", function () {
addAll();
});
addAll();
});
function addAll() {
var sum = 0
$('.add').each(function (){
sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
});
$('#total').html(sum);
}
});
</script>
All I have in the header is a Jquery attachment:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


Why not just this? tested in mobile Safari
Also beware of jsFiddle's default onload
$(window).load(function() {
$(".add").on("change", function() {
addAll();
});
addAll();
});
function addAll() {
var sum = 0
$('.add').each(function() {
sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
});
$('#total').html(sum);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div data-role="page" id="page1">
<div data-role="header">
<h1>My page</h1>
</div>
<div role="main" class="ui-content">
<div id="mysliders">
<label for="slider-1">Slider:</label>
<input class="add" type="range" name="slider-1" id="slider-1" min="0" max="100" value="50" />
<label for="slider-2">Slider:</label>
<input class="add" type="range" name="slider-2" id="slider-2" min="0" max="100" value="40" />
<label for="slider-3">Slider:</label>
<input class="add" type="range" name="slider-3" id="slider-3" min="0" max="100" value="30" />
<label for="slider-4">Slider:</label>
<input class="add" type="range" name="slider-4" id="slider-4" min="0" max="100" value="65" />
<label for="slider-5">Slider:</label>
<input class="add" type="range" name="slider-5" id="slider-5" min="0" max="100" value="11" />
<label for="slider-6">Slider:</label>
<input class="add" type="range" name="slider-6" id="slider-6" min="0" max="100" value="90" />
</div>
<hr />
<p>Total: <strong id="total"></strong>
</p>
</div>
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div>
</div>

Related

Is there a reason why my sliders aren't working with the code I have used?

Is there something wrong with the way I have formatted it or will I have to go the JavaScript route? I'm looking for the code to update automatically to whatever number I have set the slider to or vise versa.
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>

It would be better to call a simple function to get the other input and set it's value regardless of ID. This goes to the parent element and then finds the child that doesn't match the same type of the initial input and sets it's value.
Just for future reference, it is not good practice to have elements with the same ID: https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute
function setValue(input) {
let val = input.value;
let selector = `input:not([type=${input.getAttribute('type')}])`;
let otherInput = input.parentElement.querySelectorAll(selector);
otherInput[0].value = val;
}
<div>
<input class="value" type="number" value="10" min="0" max="50" oninput="setValue(this)">
<input class="slider" type="range" value="10" min="0" max="50" oninput="setValue(this)">
</div>
<div>
<input class="value" type="number" value="10" min="0" max="50" oninput="setValue(this)">
<input class="slider" type="range" value="10" min="0" max="50" oninput="setValue(this)">
</div>
<div>
<input class="value" type="number" value="10" min="0" max="50" oninput="setValue(this)">
<input class="slider" type="range" value="10" min="0" max="50" oninput="setValue(this)">
</div>
<div>
<input class="value" type="number" value="10" min="0" max="50" oninput="setValue(this)">
<input class="slider" type="range" value="10" min="0" max="50" oninput="setValue(this)">
</div>
<div>
<input class="value" type="number" value="10" min="0" max="50" oninput="setValue(this)">
<input class="slider" type="range" value="10" min="0" max="50" oninput="setValue(this)">
</div>
<div>
<input class="value" type="number" value="10" min="0" max="50" oninput="setValue(this)">
<input class="slider" type="range" value="10" min="0" max="50" oninput="setValue(this)">
</div>

All I had to do was wrap it in the form tag. Like so...
<form>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
</form>
<form>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
</form>
<form>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
</form>
<form>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
</form>
<form>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
</form>
<form>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
</form>

Linking Event Handlers in forEach Loop Javascript NodeList

I'm trying to link the event of two input types in a NodeList. I'm able to link a single pair of inputs but once I add more pairs, I'm unable to link them. What am I doing wrong?
var range = document.querySelectorAll(".inputRange");
var field = document.querySelectorAll(".inputNumber");
// console.log(range);
// console.log(field);
range.forEach(input => {
input.addEventListener("input", e => {
// console.log("RANGE EVENT: " +e.type)
field.value = e.target.value;
});
});
field.forEach(input => {
input.addEventListener("input", e => {
range.value = e.target.value;
});
});
<div class="card grd">
<h4 class="r1">Recipe</h4>
<p>Low</p>
<h2 class="r2"><input class="inputNumber" id="num1" min="0" max="100" type="number" value="0.75" step=".01" maxlength="8" /></h2>
<div class="sldcon">
<input class="inputRange" id="range" type="range" min="0" max="100" value="0.75" step=".01" />
</div>
<p>Mid</p>
<h2 class="r2"><input class="inputNumber" id="num1" min="0" max="100" type="number" value="35" step=".01" maxlength="8" /></h2>
<div class="sldcon">
<input class="inputRange" id="range" type="range" min="0" max="100" value="35" step=".01" />
</div>
<p>High</p>
<h2 class="r2"><input class="inputNumber" id="num1" min="0" max="1000" type="number" value="40" step=".01" maxlength="8" /></h2>
<div class="sldcon">
<input class="inputRange" id="range" type="range" min="0" max="1000" value="40" step=".01" />
</div>
</div>

Iterate over only one of the collections, and inside the loop, get a reference to the linked input by navigating the nearby DOM, then add listeners to both:
document.querySelectorAll(".inputNumber").forEach((field) => {
const range = field.parentElement.nextElementSibling.children[0];
range.oninput = () => field.value = range.value;
field.oninput = () => range.value = field.value;
});
<div class="card grd">
<h4 class="r1">Recipe</h4>
<p>Low</p>
<h2 class="r2"><input class="inputNumber" id="num1" min="0" max="100" type="number" value="0.75" step=".01" maxlength="8" /></h2>
<div class="sldcon">
<input class="inputRange" id="range" type="range" min="0" max="100" value="0.75" step=".01" />
</div>
<p>Mid</p>
<h2 class="r2"><input class="inputNumber" id="num1" min="0" max="100" type="number" value="35" step=".01" maxlength="8" /></h2>
<div class="sldcon">
<input class="inputRange" id="range" type="range" min="0" max="100" value="35" step=".01" />
</div>
<p>High</p>
<h2 class="r2"><input class="inputNumber" id="num1" min="0" max="1000" type="number" value="40" step=".01" maxlength="8" /></h2>
<div class="sldcon">
<input class="inputRange" id="range" type="range" min="0" max="1000" value="40" step=".01" />
</div>
</div>
Or you could reference the same index on the other collection:
const ranges = document.querySelectorAll(".inputRange");
document.querySelectorAll(".inputNumber").forEach((field, i) => {
const range = ranges[i];
range.oninput = () => field.value = range.value;
field.oninput = () => range.value = field.value;
});
<div class="card grd">
<h4 class="r1">Recipe</h4>
<p>Low</p>
<h2 class="r2"><input class="inputNumber" id="num1" min="0" max="100" type="number" value="0.75" step=".01" maxlength="8" /></h2>
<div class="sldcon">
<input class="inputRange" id="range" type="range" min="0" max="100" value="0.75" step=".01" />
</div>
<p>Mid</p>
<h2 class="r2"><input class="inputNumber" id="num1" min="0" max="100" type="number" value="35" step=".01" maxlength="8" /></h2>
<div class="sldcon">
<input class="inputRange" id="range" type="range" min="0" max="100" value="35" step=".01" />
</div>
<p>High</p>
<h2 class="r2"><input class="inputNumber" id="num1" min="0" max="1000" type="number" value="40" step=".01" maxlength="8" /></h2>
<div class="sldcon">
<input class="inputRange" id="range" type="range" min="0" max="1000" value="40" step=".01" />
</div>
</div>

Form calculations, only first field works

I need to sum all prices and multiply them with quantity. Problem is that only first field calculates good, others take price value of first. Help please
This is were I came for now:
$('.orderForm__item').on('input', function() {
var totalSum = 0;
$('.quantity, .price').each(function() {
var quantity = $(this).val();
var price = $('.price').attr('value');
if ($.isNumeric(quantity)) {
totalSum += parseFloat(quantity) * parseFloat(price);
}
});
$('#total').text(totalSum);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form" class="orderForm">
<div class="orderForm__item">
<label>Item</label>
<input min="0" max="99" type="number" class="quantity" name="quantity" /><br>
<span class="price" value="1.70">(1.70 KM)</span><br>
</div>
<div class="orderForm__item">
<label>Item</label>
<input min="0" max="99" type="number" class="quantity" name="quantity" /><br>
<span class="price" value="3">(3.0 KM)</span><br>
</div>
<div class="orderForm__item">
<label>Item</label>
<input min="0" max="99" type="number" class="quantity" name="quantity" /><br>
<span class="price" value="15">(15 KM)</span><br>
</div>
<div class="orderForm__item">
<label>Item</label>
<input min="0" max="99" type="number" class="quantity" name="quantity" /><br>
<span class="price" value="1.7">(1.70 KM)</span><br>
</div>
</form>
Total: <output id="total"></output>

You should each for orderForm__item and find quantity, price per item:
$('.orderForm__item').on('input', function() {
var totalSum = 0;
$('.orderForm__item').each(function() {
var quantity = $(this).find('.quantity').val();
var price = $(this).find('.price').attr('value');
if ($.isNumeric(quantity)) {
totalSum += parseFloat(quantity) * parseFloat(price);
}
});
$('#total').text(totalSum);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form" class="orderForm">
<div class="orderForm__item">
<label>Item</label>
<input min="0" max="99" type="number" class="quantity" name="quantity" /><br>
<span class="price" value="1.70">(1.70 KM)</span><br>
</div>
<div class="orderForm__item">
<label>Item</label>
<input min="0" max="99" type="number" class="quantity" name="quantity" /><br>
<span class="price" value="3">(3.0 KM)</span><br>
</div>
<div class="orderForm__item">
<label>Item</label>
<input min="0" max="99" type="number" class="quantity" name="quantity" /><br>
<span class="price" value="15">(15 KM)</span><br>
</div>
<div class="orderForm__item">
<label>Item</label>
<input min="0" max="99" type="number" class="quantity" name="quantity" /><br>
<span class="price" value="1.7">(1.70 KM)</span><br>
</div>
</form>
Total: <output id="total"></output>

Average of 4 slider values

I'm trying to get the average of 4 simple input sliders. I want to show the average value in a textfield. I'm pretty sure I need to use javascript/jquery. But i'm not very familiar with it, so I could need som help. I'm pretty sure it is very simple, but i don't know which event handler I should use etc.
I got 4 sliders just like this:
<div class="holder-left">
<p>Subjektiv eller objektiv?</p>
<input class="slider" type="range" min="1" max="5" value="3" />
<div class="left">Subjektiv</div>
<div class="right">Objektiv</div>
</div>
I would appreciate any kind of help.

Try this
$(".slider").change( function(e){
var b=0;
$('.slider').each(function(){
var a=parseInt($(this).val());
b=b+a;
});
var avg=b/4;
$('#textValue').val(avg);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Result - <input type="text" id="textValue" />
<div class="holder-left">
<p>Subjektiv eller objektiv?</p>
<input class="slider" type="range" min="1" max="5" value="3" />
<div class="left">Subjektiv</div>
<div class="right">Objektiv</div>
</div>
<div class="holder-left">
<p>Subjektiv eller objektiv?</p>
<input class="slider" type="range" min="1" max="5" value="4" />
<div class="left">Subjektiv</div>
<div class="right">Objektiv</div>
</div>
<div class="holder-left">
<p>Subjektiv eller objektiv?</p>
<input class="slider" type="range" min="1" max="5" value="3" />
<div class="left">Subjektiv</div>
<div class="right">Objektiv</div>
</div>
<div class="holder-left">
<p>Subjektiv eller objektiv?</p>
<input class="slider" type="range" min="1" max="5" value="5" />
<div class="left">Subjektiv</div>
<div class="right">Objektiv</div>
</div>

AddEventListener is not working inside $(document).ready()

I have the following part of code for a cordova application:
$('.shadow-slider').addEventListener("touchmove",function(e){
e.preventDefault();
update();
shadow = x+"px "+y+"px ";
if (op != 1){
if(op.length > 3){op=op.substring(0, 3);}
color="rgba("+r+","+g+","+b+","+op+")";
}
else{
color="rgb("+r+","+g+","+b+")";
}
if (blur != 0){shadow += blur+"px ";}
shadow += color;
$('#object').css("text-shadow",shadow);
$('#code-output').html("text-shadow:"+shadow+";");
});
inside the $(document).ready() for some sliders.
html:
<div class="container">
<div class="jumbotron text-center">
<h1 class="text-center"><span class='text-warning'>Text Shadow Generator V1.0</span></h1>
<p>Create awesome text shadow with pure CSS3.</p>
</div>
<div id="sliders">
<div class="row text-center">
<div class="col-md-4">
<h1>X-axis</h1>
<input type="range" id="x" min="-10" max="10" step="1" value="0" class='shadow-slider'>
</div>
<div class="col-md-4">
<h1>Y-axis</h1>
<input type="range" id="y" min="-10" max="10" step="1" value="0" class='shadow-slider'>
</div>
<div class="col-md-4">
<h1>Blur</h1>
<input type="range" id="blur" min="0" max="10" step="1" value="0" class='shadow-slider'>
</div>
</div>
<!--End for shadow axis and blur sliders-->
<div class="container" style="margin-top:1em;"><p id="object">All text shadows will be applied here</p></div>
<div class="row text-center">
<div class="col-md-3">
<h1>Red</h1>
<input type="range" id="red" min="0" max="255" step="1" value="0" class='shadow-slider'>
</div>
<div class="col-md-3">
<h1>Green</h1>
<input type="range" id="green" min="0" max="255" step="1" value="0" class='shadow-slider'>
</div>
<div class="col-md-3">
<h1>Blue</h1>
<input type="range" id="blue" min="0" max="255" step="1" value="0" class='shadow-slider'>
</div>
<div class="col-md-3">
<h1>Opacity</h1>
<input type="range" id="o" min="0" max="1" step="0.1" value="1" class='shadow-slider'>
</div>
</div>
</div>
The problem is that when using jquery the addEventListener method the touchmove is not working.Any ideas ?

addEventListener is not a function in jQuery, you can replace this by :
$('.shadow-slider').on("touchmove",function(e){
// your code here
});
addEventListener is for pure JS :
document.addEventListener('touchmove', function(e){
// your code here
});
or for a specific html tag with an ID
document.getElementById('myDiv').addEventListener('touchmove', function(e){
// your code here
});

Categories