I am unsuccessfully trying to squeze the first three functions into one, so that one function can handle different outputs from three different sliders instead of creating the same functions 3 times for different elements. Is there a good way to do it?
var x = document.getElementById("fader1");
x.addEventListener("mousemove", function(input){
document.getElementById("protein").value = x.value;
});
var y = document.getElementById("fader2");
y.addEventListener("mousemove", function(input){
document.getElementById("carbs").value = y.value;
});
var z = document.getElementById("fader3");
z.addEventListener("mousemove", function(input){
document.getElementById("fat").value = z.value;
});
$(function(){
$(".bar").on("input", function () {
var val1 = $("#fader1").val();
var val2 = $("#fader2").val();
var val3 = $("#fader3").val();
var sum = (val1*4) + (val2*4) + (val3*9);
$("#sum").text(sum);
switch (true) {
case (sum <= 600):
$("#sum").css("color", "red");
break;
case (sum > 601 && sum <= 1200):
$("#sum").css("color", "yellow");
break;
case (sum > 1200):
$("#sum").css("color", "orange");
break;
default:
$("#sum").css("color", "red");
};
});
});
<body>
<div class="container">
<div class="protein">
<p>Protein</p>
<output id="protein"></output>
<input type="range" min="0" max="100" value="" id="fader1" class="bar">
</div>
<div class="carbs">
<p>Carbohydrates</p>
<output id="carbs"></output>
<input type="range" min="0" max="100" value="" id="fader2" class="bar">
</div>
<div class="fat">
<p>Fat</p>
<output id="fat"></output>
<input type="range" min="0" max="100" value="" id="fader3" class="bar">
</div>
<div class="total">
<p>Calories: </p>
<div id="sum">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
Just use the input event and traverse to the current <output> using prev(). This also allows you to trigger the input event on page load to fill in the text values.
Using another event on top of the input event doesn't make sense
$(".bar").on("input", function() {
// "this" is current input event occurs on - set output value accordingly
$(this).prev().val($(this).val());
var val1 = $("#fader1").val();
var val2 = $("#fader2").val();
var val3 = $("#fader3").val();
var sum = (val1 * 4) + (val2 * 4) + (val3 * 9);
$("#sum").text(sum);
// css switch removed for clarity
// now trigger the event on page load
}).trigger('input');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="protein">
<p>Protein</p>
<output id="protein"></output>
<input type="range" min="0" max="100" value="" id="fader1" class="bar">
</div>
<div class="carbs">
<p>Carbohydrates</p>
<output id="carbs"></output>
<input type="range" min="0" max="100" value="" id="fader2" class="bar">
</div>
<div class="fat">
<p>Fat</p>
<output id="fat"></output>
<input type="range" min="0" max="100" value="" id="fader3" class="bar">
</div>
<div class="total">
<p>Calories: </p>
<div id="sum">
</div>
</div>
</div>
<body>
<div class="container">
<div class="protein">
<p>Protein</p>
<output id="protein"></output>
<input type="range" min="0" max="100" value="" id="fader1" class="bar">
</div>
<div class="carbs">
<p>Carbohydrates</p>
<output id="carbs"></output>
<input type="range" min="0" max="100" value="" id="fader2" class="bar">
</div>
<div class="fat">
<p>Fat</p>
<output id="fat"></output>
<input type="range" min="0" max="100" value="" id="fader3" class="bar">
</div>
<div class="total">
<p>Calories: </p>
<div id="sum">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$('input').mousemove(function(){
$(this).siblings('output').val($(this).val());
})
$(function(){
$(".bar").on("input", function () {
var valueElements = $('input');
var sum = (valueElements[0].value *4) + (valueElements[1].value*4) + (valueElements[2].value*9);
$("#sum").text(sum);
switch (true) {
case (sum <= 600):
$("#sum").css("color", "red");
break;
case (sum > 601 && sum <= 1200):
$("#sum").css("color", "yellow");
break;
case (sum > 1200):
$("#sum").css("color", "orange");
break;
default:
$("#sum").css("color", "red");
};
});
});
</script>
</body>
Yes there is, create a function and call it with different ids, like below using previousSibling
setValues('fader1');
setValues('fader2');
setValues('fader3');
// our function for setting values
function setValues(id) {
var x = document.getElementById(id);
x.addEventListener("mousemove", function(){
x.previousElementSibling.innerHTML = x.value;
});
}
setValues('fader1');
setValues('fader2');
setValues('fader3');
$(function(){
$(".bar").on("input", function () {
var val1 = $("#fader1").val();
var val2 = $("#fader2").val();
var val3 = $("#fader3").val();
var sum = (val1*4) + (val2*4) + (val3*9);
$("#sum").text(sum);
switch (true) {
case (sum <= 600):
$("#sum").css("color", "red");
break;
case (sum > 601 && sum <= 1200):
$("#sum").css("color", "yellow");
break;
case (sum > 1200):
$("#sum").css("color", "orange");
break;
default:
$("#sum").css("color", "red");
};
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="protein">
<p>Protein</p>
<output id="protein"></output>
<input type="range" min="0" max="100" value="" id="fader1" class="bar">
</div>
<div class="carbs">
<p>Carbohydrates</p>
<output id="carbs"></output>
<input type="range" min="0" max="100" value="" id="fader2" class="bar">
</div>
<div class="fat">
<p>Fat</p>
<output id="fat"></output>
<input type="range" min="0" max="100" value="" id="fader3" class="bar">
</div>
<div class="total">
<p>Calories: </p>
<div id="sum">
</div>
</div>
</div>
Related
I'm trying to display values of every slider I have on my page, this is my code so far:
var i = 0;
var st = 'slider';
var ot = 'output';
var s = '';
var o = '';
for (var x = 0; x < 3; x++) {
i++;
s = st+i;
o = ot+i;
var s = document.getElementById("range"+i);
var o = document.getElementById("limit"+i);
o.innerHTML = s.value;
s.oninput = function() {
o.innerHTML = this.value;
}
}
<div id="slidecontainer">
<input type="range" min="2" max="50" value="20" class="slider" id="range1" >
<label>You chose <span id="limit1"></span></label>
</div>
<div id="slidecontainer">
<input type="range" min="2" max="50" value="20" class="slider" id="range2" >
<label>You chose <span id="limit2"></span></label>
</div>
<div id="slidecontainer">
<input type="range" min="2" max="50" value="20" class="slider" id="range3" >
<label>You chose <span id="limit3"></span></label>
</div>
It's only changing the last value when I move any slider, I want to display the value of each slider respectively. I'm using a loop in my JavaScript code because I have more than 20 sliders and I don't want to write a function for each of them unless that is the only way of doing it. Any suggestions?
The problem you are having is related to variable scope. There is only one variable named o, each iteration of the loop changes this variable. So when the
oninput function is evaluated o equals the last value you set it to equal. The current value of o is not "saved" in the function definition.
See https://www.w3schools.com/js/js_scope.asp for more information.
See solution below, here I find the limit in each call to the function.
function updateLabel() {
var limit = this.parentElement.getElementsByClassName("limit")[0];
limit.innerHTML = this.value;
}
var slideContainers = document.getElementsByClassName("slidecontainer");
for (var i = 0; i < slideContainers.length; i++) {
var slider = slideContainers[i].getElementsByClassName("slider")[0];
updateLabel.call(slider);
slider.oninput = updateLabel;
}
<div class="slidecontainer">
<input type="range" min="2" max="50" value="20" class="slider">
<label>You chose <span class="limit"></span></label>
</div>
<div class="slidecontainer">
<input type="range" min="2" max="50" value="20" class="slider">
<label>You chose <span class="limit"></span></label>
</div>
<div class="slidecontainer">
<input type="range" min="2" max="50" value="20" class="slider">
<label>You chose <span class="limit"></span></label>
</div>
I'm trying to work out the percentage value for each field in a form. However my current code is only working out the value for the first field or whichever one is focused.
I'd like it so that the percentage value only for the filed in the same fieldset
The current code works but i'd like to apply to to multiple fieldsets without them interfering with other inputs on the same page
In the snippet you can see that the two separate amounts which are editing each others details
function percentageCal() {
var $price = $(".form-item--invamt .form-item__input").on("input", calculatePerc),
$percentage = $(".form-item__input-expand .percentage").on("input", calculatePrice),
$currency = $(".form-item__input-expand .currency").on("focus", removePercent),
$none = $(".form-item--charges .no-charge").on("focus", removePercent),
$increase = $(".wrapper-types__percentage-value"),
$increaseWrap = $(".wrapper-types__percentage");
$($percentage).add($currency).keypress(function(event) {
if (event.which != 8 && event.which != 0 && (event.which < 48 || event.which > 57)) {
return false;
}
});
function calculatePrice() {
var percentage = parseFloat($(this).val());
var price = parseFloat($price.val());
var calcPrice = parseFloat((price * percentage / 100).toFixed(2));
var newPrice = price + calcPrice;
$increase.text(newPrice);
$increaseWrap.fadeIn();
if (isNaN(newPrice)) {
$increaseWrap.hide();
}
}
function calculatePerc() {
var percentage = $percentage.val();
var price = parseFloat($(this).val());
var calcPerc = parseFloat((price * percentage / 100).toFixed(2));
var newPrice = price + calcPerc;
$increase.text(newPrice);
}
function removePercent() {
$increaseWrap.fadeOut();
}
}
percentageCal();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="wrapper-types__investment">
<legend class="sr-only">Investment 1</legend>
<div class="form-item form-item--required form-item--invamt">
<label class="form-item__label" for="wrappers[0]">Investment amount</label>
<div class="form-item__input-labelled">
<span class="form-item__input-label">£</span>
<input class="form-item__input " type="number" name="wrappers[0]" id="wrappers[0]" min="0" value="15000" required>
</div>
</div>
<div class="form-item form-item--charges-wrap">
<span class="form-item__label">Charges</span>
<div class="form-item form-item--charges">
<label class="form-item__input-label-expand" for="percentage1">%</label>
<div class="form-item__input-expand">
<input class="form-item__input percentage" type="number" name="percentage" id="percentage1">
</div>
</div>
</div>
<div class="form-item form-item--charges-wrap">
<span class="wrapper-types__percentage">= £<span class="wrapper-types__percentage-value"></span></span>
</div>
<div class="form-item form-item--action-btns">
</div>
</fieldset>
<fieldset class="wrapper-types__investment">
<legend class="sr-only">Investment 2</legend>
<div class="form-item form-item--required form-item--invamt">
<label class="form-item__label" for="wrappers[1]">Investment amount</label>
<div class="form-item__input-labelled">
<span class="form-item__input-label">£</span>
<input class="form-item__input " type="number" name="wrappers[1]" id="wrappers[1]" min="0" value="13005.02" required>
</div>
</div>
<div class="form-item form-item--charges-wrap">
<span class="form-item__label">Charges</span>
<div class="form-item form-item--charges">
<label class="form-item__input-label-expand" for="percentage2">%</label>
<div class="form-item__input-expand">
<input class="form-item__input percentage" type="number" name="percentage" id="percentage2">
</div>
</div>
</div>
<div class="form-item form-item--charges-wrap">
<span class="wrapper-types__percentage">= £<span class="wrapper-types__percentage-value"></span></span>
</div>
<div class="form-item form-item--action-btns">
</div>
</fieldset>
Instead of IDs, use classes and DOM traversal functions to find the fields in the same fieldset.
function percentageCal() {
var $price = $(".form-item--invamt .form-item__input").on("input", calculatePerc),
$percentage = $(".form-item__input-expand .percentage").on("input", calculatePrice),
$currency = $(".form-item__input-expand .currency").on("focus", removePercent),
$none = $(".form-item--charges .no-charge").on("focus", removePercent),
$increase = $(".wrapper-types__percentage-value"),
$increaseWrap = $(".wrapper-types__percentage");
$percentage.add($currency).keypress(function(event) {
if (event.which != 8 && event.which != 0 && (event.which < 48 || event.which > 57)) {
return false;
}
});
function calculatePrice() {
var $fieldset = $(this).closest("fieldset");
var percentage = parseFloat($(this).val());
var price = parseFloat($fieldset.find(".form-item--invamt .form-item__input").val());
var calcPrice = parseFloat((price * percentage / 100).toFixed(2));
var newPrice = price + calcPrice;
$fieldset.find(".wrapper-types__percentage-value").text(newPrice);
$fieldset.find(".wrapper-types__percentage").fadeIn();
if (isNaN(newPrice)) {
$fieldset.find(".wrapper-types__percentage").hide();
}
}
function calculatePerc() {
var $fieldset = $(this).closest("fieldset");
var percentage = $fieldset.find(".form-item__input-expand .percentage").val();
var price = parseFloat($(this).val());
var calcPerc = parseFloat((price * percentage / 100).toFixed(2));
var newPrice = price + calcPerc;
$fieldset.find(".wrapper-types__percentage-value").text(newPrice);
}
function removePercent() {
var $fieldset = $(this).closest("fieldset");
$fieldset.find(".wrapper-types__percentage").fadeOut();
}
}
percentageCal();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="wrapper-types__investment">
<div class="form-item--invamt">
<div>
<span class="form-item__input-label">£</span>
<input class="form-item__input " type="number" name="wrappers[0]" id="wrappers[0]" min="0" value="15000" required>
</div>
</div>
<div class="form-item--charges-wrap">
<div class="form-item--charges">
<label class="form-item__input-label-expand" for="percentage">%</label>
<div class="form-item__input-expand">
<input class="form-item__input percentage" type="number" name="percentage" id="percentage">
</div>
</div>
</div>
<div class="form-item--charges-wrap">
<span class="wrapper-types__percentage">= £<span class="wrapper-types__percentage-value"></span></span>
</div>
</fieldset>
<fieldset class="wrapper-types__investment">
<div class="form-item--invamt">
<div>
<span class="form-item__input-label">£</span>
<input class="form-item__input " type="number" name="wrappers[1]" id="wrappers[1]" min="0" value="15000" required>
</div>
</div>
<div class="form-item--charges-wrap">
<div class="form-item--charges">
<label class="form-item__input-label-expand" for="percentage1">%</label>
<div class="form-item__input-expand">
<input class="form-item__input percentage" type="number" name="percentage" id="percentage1">
</div>
</div>
</div>
<div class="form-item--charges-wrap">
<span class="wrapper-types__percentage">= £<span class="wrapper-types__percentage-value"></span></span>
</div>
</fieldset>
I need to add up all of my JQM slider values, site-wide. I have 5 pages with 4 sliders on each. I am categorizing the values via 5 different classes. I want to add up and then average all of the values in each given class (.ex, .ag, .co, .ne, and op) on the final page. Is there an easy way of doing this?
The code below correctly categorizes and totals the values for one page. All five pages are the same, but with different questions. I would love any help I can get. Thanks!
HTML:
<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="Slider17">Is a Trendsetter:</label>
<input class="op" type="range" name="Slider17" id="Slider17" min="1" max="5" value="3" />
<label for="Slider18">Handles Stress Well:</label>
<input class="ne" type="range" name="Slider18" id="Slider18" min="1" max="5" value="3" />
<label for="Slider19">Prefers an Active Lifestyle:</label>
<input class="ex" type="range" name="Slider19" id="Slider19" min="1" max="5" value="3" />
<label for="Slider20">Is Punctual:</label>
<input class="co" type="range" name="Slider20" id="Slider20" min="1" max="5" value="3" />
</div>
<hr />
<p>Extraversion: <strong id="total"></strong></p>
<p>Agreeableness: <strong id="total2"></strong></p>
<p>Conscientiousness: <strong id="total3"></strong></p>
<p>Neuroticism: <strong id="total4"></strong></p>
<p>Openess: <strong id="total5"></strong></p>
</div>
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div>
</div>
JS:
$(document).on("pagecreate", "#page1", function () {
$(".ex").on("change", function () {
addAll();
});
addAll();
});
$(document).on("pagecreate", "#page1", function () {
$(".ag").on("change", function () {
addAll2();
});
addAll2();
});
$(document).on("pagecreate", "#page1", function () {
$(".co").on("change", function () {
addAll3();
});
addAll3();
});
$(document).on("pagecreate", "#page1", function () {
$(".ne").on("change", function () {
addAll4();
});
addAll4();
});
$(document).on("pagecreate", "#page1", function () {
$(".op").on("change", function () {
addAll5();
});
addAll5();
});
function addAll() {
var sum = 0
$('.ex').each(function (){
sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
});
$('#total').html(sum);
}
function addAll2() {
var sum = 0
$('.ag').each(function (){
sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
});
$('#total2').html(sum);
}
function addAll3() {
var sum = 0
$('.co').each(function (){
sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
});
$('#total3').html(sum);
}
function addAll4() {
var sum = 0
$('.ne').each(function (){
sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
});
$('#total4').html(sum);
}
function addAll5() {
var sum = 0
$('.op').each(function (){
sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
});
$('#total5').html(sum);
}
See Demo Here
There are several ways:
Save the values in one or multiple cookies
Save the values in local storage
Add the values to your links (GET)
Save the values via ajax on a server
I have reviewed your code and made it con size including the total logic, both on change of the slider and on initial stage:
https://jsfiddle.net/kmuuhfL8/6/
Javascript code changes:
$(document).on("pagecreate", "#page1", function () {
printValue();
$(".slider").on("change", function () {
printValue();
});
});
function printValue() {
var sumAll = 0;
$('.slider').each(function( index ) {
$('#sum' + $(this).attr('id')).html($(this).val());
sumAll += isNaN($(this).val()) ||$(this).val()=== '' ? 0 : parseFloat($(this).val());
});
$('#sumAllSlider').html(sumAll);
}
HTML changes:
<div data-role="page" id="page1">
<div data-role="header">
<h1>Question Page 1</h1>
</div>
<div role="main" class="ui-content">
<div id="mysliders">
<label for="Slider17">Question One:</label>
<input class="slider" type="range" name="Slider17" id="Slider17" min="1" max="5" value="3" />
<label for="Slider18">Question Two:</label>
<input class="slider" type="range" name="Slider18" id="Slider18" min="1" max="5" value="3" />
<label for="Slider19">Question Three:</label>
<input class="slider" type="range" name="Slider19" id="Slider19" min="1" max="5" value="3" />
<label for="Slider20">Question Four:</label>
<input class="slider" type="range" name="Slider20" id="Slider20" min="1" max="5" value="3" />
<label for="Slider21">Question Five:</label>
<input class="slider" type="range" name="Slider21" id="Slider21" min="1" max="5" value="3" />
</div>
<div id="totals">
<hr />
<p>Extraversion: <strong id="sumSlider17"></strong></p>
<p>Agreeableness: <strong id="sumSlider18"></strong></p>
<p>Conscientiousness: <strong id="sumSlider19"></strong></p>
<p>Neuroticism: <strong id="sumSlider20"></strong></p>
<p>Openess: <strong id="sumSlider21"></strong></p>
<p>Total: <strong id="sumAllSlider"></strong></p>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h1></h1>
</div>
</div>
I'm having an issue while designing a music player. My music player works with the following code:
playlist_index = 0;
// Set object references
playbtn = document.getElementById("playpausebtn");
seekslider = document.getElementById("seekslider");
volumeslider = document.getElementById("volumeslider");
curtimetext = document.getElementById("curtimetext");
durtimetext = document.getElementById("durtimetext");
playlist_status = document.getElementById("playlist_status");
playerImg = document.getElementById("playerImg");
// Audio Object
audio = new Audio();
audio.src = dir+playlist[0].song_url;
audio.loop = false;
playlist_status.innerHTML = playlist[playlist_index].song_name + '-' + playlist[playlist_index].band_name;
// Add Event Handling
playbtn.addEventListener("click",playPause);
mutebtn.addEventListener("click", mute);
seekslider.addEventListener("mousedown", function(event){ seeking=true; seek(event); });
seekslider.addEventListener("mousemove", function(event){ seek(event); });
seekslider.addEventListener("mouseup",function(){ seeking=false; });
volumeslider.addEventListener("mousemove", setvolume);
audio.addEventListener("timeupdate", function(){ seektimeupdate(); });
audio.addEventListener("ended", function(){ switchTrack(); });
audio.addEventListener("play", function(){ playbtn.style.background = "url(http://localhost/wordpress/wp-content/themes/virtue-child/pause.png) no-repeat"; });
// Functions
function switchTrack(){
if(playlist_index == (playlist.length - 1)){
playlist_index = 0;
} else {
playlist_index++;
}
playlist_status.innerHTML = playlist[playlist_index].song_name + '-' + playlist[playlist_index].band_name;
audio.src = dir+playlist[playlist_index].song_url;
setTimeout(audio.play(), 2000);
}
(plus some more functions for updating seek bars and times) and the following HTML:
<div id="audio_player">
<div id="playerImg"></div>
<div id="audio_controls">
<button id="playpausebtn"></button>
<p id="playlist_status"></p>
<div id="sliderHolder">
<input id="seekslider" type="range" min="0" max="100" value="0" step="1">
<span id="curtimetext">00:00</span>
<span id="durtimetext">00:00</span>
</div>
<button id="mutebtn"></button>
<br/>
<input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
</div>
</div>
But when I start housing elements in container divs, the above code fails to update the time and the seek slider doesn't work. The housed and styled audio player HTML looks like this:
<div id="audio_player">
<img src="wp-content/uploads/band-photos/Logo.png" id="playerImg">
<p id="playlist_status"></p>
<div id="audio_controls">
<div id="sliderHolder">
<input id="seekslider" type="range" min="0" max="100" value="0" step="1">
<span id="curtimetext">00:00</span>
<span id="durtimetext">00:00</span>
</div>
<div id="musicButtons">
<button id="playpausebtn"></button>
<div id="volumeHolder">
<img src="http://localhost/wordpress/wp-content/themes/virtue-child/speaker.png" id="volButton">
<input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
</div>
</div>
</div>
</div>
Is there an issue when I begin to house elements in divs and searching the DOM for them? Again, the JavaScript works with the first set of HTML, not the second.
Thank you everyone for the input. It looks like in styling the new player I removed the mute button. Therefore: 'mutebtn.addEventListener("click", mute);' was throwing an error and causing the rest of the functions not to work.
What basically i need to do is add new color, save it in a dropdown list and than when the different option are selected, i need to show the name of the color with the matched color name.
Everything works but i can't update the color name when i select a new option from my dropdown list.
Here my Html code:
<form id="form">
<label for="name">Color name
<input type="text" id="name" value="">
</label>
<label for="red">Red
<input type="range" class="red" min="0" max="255" step="1" value="0" id="red" >
</label>
<label for="green">Green
<input type="range" class="green" min="0" max="255" step="1" value="0" id="green">
</label>
<label for="blue">Blue
<input type="range" class="blue" min="0" max="255" step="1" value="0" id="blue">
</label>
<label for="alpha">Alpha
<input type="range" class="alpha" min="0" max="1" step="0.1" value="0" id="alpha">
</label>
<p>Rgba(0,0,0,0)</p> <input type="button" id="save" value="Save" />
</form>
<select id="listColors">
<option value="">Choose your color</option>
</select>
<span></span>
And here the javascript:
window.colorApp = {};
colorApp.hex = function(event){
colorApp.newRgbColor = "Rgba("+colorApp.red.val()+", "+colorApp.green.val()+", "+colorApp.blue.val()+", "+colorApp.alpha.val()+")";
//document.body.style.backgroundColor = colorApp.newRgbColor;
$("p").html(colorApp.newRgbColor);
};
colorApp.addItem = function(event){
$(colorApp.list).append('<option>' + colorApp.name.val() + colorApp.newRgbColor + '</option>');
$(form).trigger("reset");
$(name).focus();
$("p").html('Rgba(0,0,0,0)');
};
colorApp.displaySelectedColor = function(event){
colorApp.listSelected = $("#listColors option:selected");
colorApp.selectedColorName = $(colorApp.listSelected).text();
$('span').html('<span style="color:'+ colorApp.newRgbColor + '">'+ colorApp.selectedColorName + '</span>');
};
$(document).ready(function() {
colorApp.form = $('#form');
colorApp.name = $('#name');
colorApp.red = $('#red');
colorApp.green = $('#green');
colorApp.blue = $('#blue');
colorApp.alpha = $('#alpha');
colorApp.list = $('#listColors');
colorApp.input = $('input');
colorApp.input.change(colorApp.hex);
colorApp.save = $('#save');
colorApp.save.click(colorApp.addItem);
colorApp.list.change(colorApp.displaySelectedColor);
});
Here the link for the live: http://designbygio.it/colorPicker2/
Any help is really welcome!!
In your colorApp.addItem function you need to assign the value to the new option added,
colorApp.addItem = function(event){
$(colorApp.list).append('<option value="'+colorApp.newRgbColor+'">' + colorApp.name.val() + colorApp.newRgbColor + '</option>');
$(form).trigger("reset");
$(name).focus();
$("p").html('Rgba(0,0,0,0)');
};
In your colorApp.displaySelectedColor function you need to add the assignment of the option value to your newRgbColor variable
colorApp.displaySelectedColor = function(event){
colorApp.listSelected = $("#listColors option:selected");
colorApp.selectedColorName = $(colorApp.listSelected).text();
colorApp.newRgbColor=$(colorApp.listSelected).val();//you need to assign the value
$('span').html('<span style="color:'+ colorApp.newRgbColor + '">'+ colorApp.selectedColorName + '</span>');
};
http://jsfiddle.net/EBJpn/1/