We Keep Coding

Dynamiclly append different class with increment numereic value by click event

I have a span tag and a button tag
<span class="myspan">1</span>
<button id="add">Add +1</button>
var arr=["myspan1","myspan2","myspan3","myspan4"}
I want to append more span tag with new class from this array with increment value by clicking button.
Like this output:
<span class="myspan1">1</span>
<span class="myspan2">2</span>
<span class="myspan3">3</span>
<span class="myspan4">4</span>
i try `
this JsFiddle
But i can not add class name to new append tag from array.
Another useful link for appending tag with new class from array
http://jsbin.com/nojipowo/2/edit?html,css,js,output
...
But i can not bring my desire output at any case...enter code here
value increaseesenter code here this snippet
<script> var i = 0; function buttonClick() {i++; document.getElementById('inc').value = i; } </script> <button onclick="buttonClick();">Click Me</button> <input type="text" id="inc" value="0"></input>
another attempt...anyone can help.. to get desire output
var i=6;
var backgrounds = ["myspan1", "myspan2", "myspan4"];
var elements = document.getElementsByClassName("myspan");var len = backgrounds.length;
$("#add").click( function() {
(i < elements.length){
$(".new-field").append('<span class="myspan">1</span><script');
var value = parseInt($(".myspan").text(), 10) + 1;
elements[i].className += ' ' + backgrounds[i%len];
i++;
$(".background").text(i);
}
});
*/
<span class="myspan">1</span>
<button id="add">Add +1</button>
<div class="new-field">
</div>

<script> var i = 0; function buttonClick() {i++; document.getElementById('inc').value = i; } </script> <button onclick="buttonClick();">Click Me</button> <input type="text" id="inc" value="0"></input>

Try this check the span length via parseInt($(".myspan").length) .And use with Array#forEach for iterate the array instead of increment i.parseInt used convert ths string to number
var i=6;
var backgrounds = ["myspan1", "myspan2", "myspan4"];
var len = backgrounds.length;
$("#add").click( function() {
var len = parseInt($(".myspan").length)
backgrounds.forEach(function(a){
$(".new-field").append('<span class="'+a+'">'+(len++)+'</span>');
})
console.log($(".new-field").html())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="myspan">1</span>
<button id="add">Add +1</button>
<div class="new-field">
</div>

Check the fiddle. Hope this helps!
HTML :
<div id="mainContainer">
<span class="myspan">1</span>
</div>
<button id="add">Add +1</button>
JS :
var arr = ["myspan1", "myspan2", "myspan3", "myspan4"];
$("#add").on("click", function() {
var spans = $("span");
var classList = [];
$.each(spans, function() {
var elemCls = $(this).attr('class').length > 1 ? $(this).attr('class').split(' ') : $(this).attr('class');
if (elemCls) {
$.each(elemCls, function() {
classList.push(this.toString());
});
}
});
$.each(arr, function(i, e) {
if ($.inArray(e, classList) == -1) {
$("#mainContainer").append("<span class='" + e + "'>" + parseInt(spans.length + 1) + "</span>");
return false;
}
});
});

display number 2 decimals

I have this code with 3 sliders that adds up all the 3 values of the sliders and displays it on the page, I want it to display it with 2 decimals after the comma. I tried using .toFixed(2) but I don't know where to place it exactly. Here is my code :
<div class="wrapper2">
<input class="slider" id="ram" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" />
<hr />
<input class="slider" id="diskSpace" data-slider-id='ex1Slider2' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" />
<hr />
<input class="slider" id="cpu" data-slider-id='ex1Slider3' type="text" data-slider-min="0" data-slider-max="4" data-slider-step="1" />
<hr />
<div id = "info"></div>
var minSliderValue = $("#ram").data("slider-min");
var maxSliderValue = $("#ram").data("slider-max");
$('#ram').slider({
value : 0,
formatter: function(value) {
return 'RAM: ' + value + 'GB';
}
});
$('#diskSpace').slider({
value : 0,
formatter: function(value) {
return 'Disk Space: ' + value + 'GB';
}
});
$('#cpu').slider({
value : 0,
formatter: function(value) {
return 'CPU : ' + value + ' Cores';
}
});
// If You want to change input text using slider handler
$('.slider').on('slide', function(slider){
var ram = $("#ram").val()*3.50;
var diskSpace = $("#diskSpace").val()*1.20;
var cpu = $("#cpu").val() * 6.30;
$("#info").html(parseInt(ram)+ parseInt(diskSpace)+ parseInt(cpu));
});
// If you want to change slider using input text
$("#inputValue").on("keyup", function() {
var val = Math.abs(parseInt(this.value, 10) || minSliderValue);
this.value = val > maxSliderValue ? maxSliderValue : val;
$('#ram','diskSpace','cpu').slider.toFixed(2)('setValue', val);
});
Jsfiddle: http://jsfiddle.net/4c2m3cup/34/

change your summing up code to the following
$('.slider').on('slide', function(slider){
var ram = $("#ram").val()*3.50;
var diskSpace = $("#diskSpace").val()*1.20;
var cpu = $("#cpu").val() * 6.30;
var totalSum=(parseFloat(ram)+ parseFloat(diskSpace)+ parseFloat(cpu)).toFixed(2);
$("#info").html(totalSum);
});
Hope it helps

You were parsing to an int. When you parse to int you lose the decimal places.
$("#info").html(parseInt(ram)+ parseInt(diskSpace)+ parseInt(cpu));
You can add them up and use x.toFixed(2). This will give you two decimal places just change the number as desired.
$("#info").html((ram + diskSpace + cpu).toFixed(2));

Add values from input to array on button click

I have 3 bootstrap sliders, which are basically input fields. The values of these sliders get displayed into an input box, and below that a price value is displayed. What I need to do is to save those 4 values to an array whenever a button is clicked. I managed to do this with the values hardcoded and without a button like this:
<li> <a class = "add-to-cart" href = "#" data-name = "Windows" data-price = "99.95" data-ram ="1" data-diskSpace="30" data-cpu="3">
<script>
$(".add-to-cart").click(function(event){
event.preventDefault(); // prevents the links from doing their default behaviour
var name = $(this).attr("data-name");
var price = Number($(this).attr("data-price"));
var ram = Number($(this).attr("data-ram"));
var diskSpace =Number($(this).attr("data-diskSpace"));
var cpu = Number($(this).attr("data-cpu"));
addItemToCart(name,price,1,ram,diskSpace,cpu);
displayCart();
});
var cart = [];
var Item = function (name,price,quantity,ram,diskSpace,cpu){
this.name = name;
this.price = price;
this.quantity = quantity;
this.ram = ram;
this.diskSpace = diskSpace;
this.cpu = cpu;
};
//addItemToCart(name,price,quantity)
function addItemToCart(name,price,quantity,ram,diskSpace,cpu){
for (var i in cart){
if(cart[i].name === name){
cart[i].quantity +=quantity;
saveCart();
return;
}
}
var item = new Item(name,price,quantity,ram,diskSpace,cpu);
cart.push(item);
}
</script>
This is my code for the values from the input box :
<input class="slider" id="ram" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" />
<hr />
<input class="slider" id="diskSpace" data-slider-id='ex1Slider2' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" />
<hr />
<input class="slider" id="cpu" data-slider-id='ex1Slider3' type="text" data-slider-min="0" data-slider-max="4" data-slider-step="1" />
<hr />
<input type="text" class="form-control" id="inputValue" value="0" />
</div>
Prijs:
<div id = "prijs">
</div>
<script>
var minSliderValue = $("#ram").data("slider-min");
var maxSliderValue = $("#ram").data("slider-max");
$('#ram').slider({
value : 0,
formatter: function(value) {
return 'RAM: ' + value + 'GB';
}
});
$('#diskSpace').slider({
value : 0,
formatter: function(value) {
return 'Disk Space: ' + value + 'GB';
}
});
$('#cpu').slider({
value : 0,
formatter: function(value) {
return 'CPU : ' + value + ' Cores';
}
});
// If You want to change input text using slider handler
$('#ram, #diskSpace, #cpu').on('slide', function(slider){
var ram = parseFloat($('#ram').val());
var diskSpace = parseFloat($('#diskSpace').val());
var cpu = parseFloat($('#cpu').val());
$("#inputValue").val("RAM="+ ram + "GB, Disk=" +diskSpace + "GB, Core="+cpu);
var totalPrice=(parseFloat(ram)*3.5 + parseFloat(diskSpace)*0.15+ parseFloat(cpu)*6.5).toFixed(2);
$("#prijs").html(totalPrice);
});
</script>
working jsfiddle for the sliders function: http://jsfiddle.net/umxhhqy4/8/

onchage event delegation to append textfields

I have this jquery code where everytime i hit "btn_add" i get 3 new textfields (usd_value, pesos_value and percent )...i want to add a change event to all usd_value texts so when they change, pesos_value of all items change their values for =usd_value * percent.Im tryiing to do the delegation at the end of code but it's not working :
<script type="text/javascript" src="jquery-2.1.4.js" charset="UTF-8" ></script>
<script type="text/javascript">
$(document).ready(function(){
var obj = $('input[name="percent"]').length;
var n = 0;
$('#btn_add').click(function(){
n++;
$('table').append('<tr id="btn_minus'+n+'"><td><input type="text" name="cost_element" value="0" readonly/></td><td><input type="text" name="description" value="{{cost_element.description}}"/></td><td><input type="text" id="id_usd_value" name="usd_value" value="{{cost_element.usd_value}}"/></td><td><input type="text" id="id_pesos_value" name="pesos_value" value="{{cost_element.pesos_value}}"/></td><td><input type="text" size= 3 id="id_rer_value" name="percent" value="{{cost_element.percent}}"/>%</td><td><input class="btn_minus btn btn-danger" name="btn_minus'+n+'" type="button" value="X"/></td></tr>');
obj = $('input[name="percent"]').length;
});
$('table').on('click',".btn_minus",function(){
var id = $(this).attr('name');
$('tr[id="'+id+'"]').remove();
});
$('.btn_delete').click(function(){
location.href = "";
});
setInterval(function(){
var percents = new Array();
$('input[name="percent"]').each(function() {
percents.push($(this).val());
});
var sum = 0;
for(var i=0, l=percents.length; i<l; i++) {
sum = sum + parseInt(percents[i],10);
}
$('#msgValidar').empty();
if(sum == 100){
$('#msgValidar').append('<h5 style="color: blue">Los valores de procentaje estan correctos.</h5>');
$('#btn_ok').removeClass('disabled');
}else{
if(obj != 0){
$('#msgValidar').append('<h5 style="color: red">Los valores de procentaje deben sumar exactamente 100%.</h5>');
$('#btn_ok').addClass('disabled');
}
}
}, 500);
$('table').on('change','.usd_value',function(){
alert('work!');
});
});
</script>
Can you help me ?? Thanks !!

There are many errors in your code. First of all, you can't add dinamically more object with the same ID, and then refer to the objects by ID, the ID must be unique. You closed wrong the parenthesis too. And the change event is not wrong, but in your "append", you isn't setted the class, but "name" and "ID" TAG, and the reference ".usd_value" is a class selector...
Try this, but you must correct the rest of your code:
<script type="text/javascript">
$(document).ready(function() {
var n = 0;
$('#btn_add').click(function() {
n++;
$('table').append('<tr id="btn_minus' + n + '"><td><input type="text" name="cost_element" value="0" readonly/></td><td><input type="text" name="description" value="{{cost_element.description}}"/></td><td><input type="text" id="id_usd_value" name="usd_value" class="usd_value" value="{{cost_element.usd_value}}"/></td><td><input type="text" id="id_pesos_value" name="pesos_value" value="{{cost_element.pesos_value}}"/></td><td><input type="text" size= 3 id="id_rer_value" name="percent" value="{{cost_element.percent}}"/>%</td><td><input class="btn_minus btn btn-danger" name="btn_minus' + n + '" type="button" value="X"/></td></tr>');
});
$('table').on('click', ".btn_minus", function() {
var id = $(this).attr('name');
$('tr[id="' + id + '"]').remove();
});
$('.btn_delete').click(function() {
location.href = "";
});
$('table').on('change', '.usd_value', function() {
alert('work!');
$('#id_pesos_value').val() = $('#id_usd_value').val() * $('#percent').val();
// in this last line you have wrong the assignment and you can't refer to ID
// change with class like ".id_usd_value" etc...
});
});
//}); <-- this is too much !
</script>
This is your code corrected on JSFiddle

JQuery - Use the value from a function

How can I use the value from a function in an if statement. I have a form where I was using return false in my script but I need changed it to preventDefault.
<form id="percentageBiz" method="post">
<input type="text" id="sum1">
<input type="text" id="sum2">
<input type="submit" onclick="return" value="Get Total">
</form>
<div id="display"></div>​
<script>
$('#percentageBiz').submit(function(e) {
var a = document.forms["percentageBiz"]["sum1"].value;
var b = document.forms["percentageBiz"]["sum2"].value;
var display=document.getElementById("display")
display.innerHTML=parseInt(a,10)+parseInt(b,10);
e.preventDefault();
});
if (display < 100) {
$("#display").addClass("notequal");
}
</script>

$('#percentageBiz').submit(function(e) {
e.preventDefault();
var $display = $("#display", this);
var a = $("#sum1", this).val();
var b = $("#sum2", this).val();
var sum = +a + +b;
$display.text( sum );
if ( sum < 100 ) {
$display.addClass("notequal");
}
});