We Keep Coding

Differentiating between input ranges

I am currently creating an application which consists of multiple HTML ranges.
<input id="r1" type="range" min="0" max="100" value="50" step="50" onChange="showValue(this.value)" />
On value change, the following function is called:
function showValue(newValue)
{
if (newValue == 100)
{
document.getElementById("range").innerHTML = "Calm";
mood = "Calm";
resetContent();
getContent(mood);
}
else if (newValue == 0)
{
document.getElementById("range").innerHTML = "Agitated";
resetContent();
mood = "Agitated";
getContent(mood);
}
else
{
document.getElementById("range").innerHTML = "";
resetContent();
}
}
getContent takes in the mood as a parameter and searches through an xml file and returns all results which match the mood:
function getContent(mood) {
$(xmlDoc).find("program").each(function(){
// this is where all the reading and writing will happe
if ($(this).find('mood').text() == mood) {
$("#content").append(
'<p>Name: ' + $(this).find('name').text() +
'<br> Mood: ' + $(this).find('mood').text() +
'</p>'
);
}
});
}
My aim is to create an aditional 3 ranges which hold different moods. How would I go about handling the different ranges within the showValue function so they all work independantly?

You can create an array in javascript to hold the mood's value
var moods=[["Agitated","Calm"],["sad","happy"],["angry","smiling"]];
function showValue(newValue,id) {
if (newValue == 100)
{
document.getElementById("range").innerHTML = moods[id][1];
mood = moods[id][1];
resetContent();
getContent(mood);
}
else if (newValue == 0)
{
document.getElementById("range").innerHTML = moods[id][0];
resetContent();
mood = moods[id][0];
getContent(mood);
}
else
{
document.getElementById("range").innerHTML = "";
resetContent();
}
}
Demo: https://jsfiddle.net/9y1foc5s/

What you are trying to do is make all the input use the same function but perform different actions basing on some of their attributes, in this case id:
function doIt($elem) {
if ($elem.attr('id') == 'r1') {
$("#output").html('action1' + $elem.val());
}
else if ($elem.attr('id') == 'r2') {
$("#output").html('action2' + $elem.val());
}
}
$('input').on('input', function(){
doIt($(this));
});
https://jsfiddle.net/xb51Lqnb/7/

Working with change to 2 elements

I have the following code
jQuery(document).ready(function(jQ) {
jQ('.WorkType').on("change", function(){
if (jQ(this).val() == 'Standard Hours'){
jQ(this).closest('.DayTimeWrapper').find('.Hours').addClass("Calc_Hours");
jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_Leave");
jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_RDO");
}else if (jQ(this).val() == 'RDO'){
jQ(this).closest('.DayTimeWrapper').find('.Hours').addClass("Calc_RDO");
jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_Leave");
jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_Hours");
}else{
jQ(this).closest('.DayTimeWrapper').find('.Hours').addClass("Calc_Leave");
jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_RDO");
jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_Hours");
}
window.setTimeout(function () {
jQ(".Calc_Hours").sum("focusout", "#standard_hours");
jQ(".Calc_Leave").sum("focusout", "#leave_hours");
jQ(".Calc_RDO").sum("focusout", "#rdo_hours");
},1000);
})
})
This code traverses the dom on a change to the element with the class WorkType and modifies the class attributes of the Hours element situated within the div DayTimeWrapper. It then performs calculations and places the results to the elements with ID as specified.
It works perfectly
However i need to perform the same calculations on additional elements with the class set to setTime so i modified the code as follows
jQuery(document).ready(function(jQ) {
jQ('.WorkType,.setTime').on("change", function(){
if (jQ('.DayTimeWrapper').closest('.WorkType').val() == 'Standard Hours'){
jQ(this).closest('.DayTimeWrapper').find('.Hours').addClass("Calc_Hours");
jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_Leave");
jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_RDO");
if (jQ('.DayTimeWrapper').closest('.WorkType').val() == 'RDO'){
jQ(this).closest('.DayTimeWrapper').find('.Hours').addClass("Calc_RDO");
jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_Leave");
jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_Hours");
}else{
jQ(this).closest('.DayTimeWrapper').find('.Hours').addClass("Calc_Leave");
jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_RDO");
jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_Hours");
}
window.setTimeout(function () {
jQ(".Calc_Hours").sum("focusout", "#standard_hours");
jQ(".Calc_Leave").sum("focusout", "#leave_hours");
jQ(".Calc_RDO").sum("focusout", "#rdo_hours");
},1000);
})
})
This is not working and i am at pains to figure out why. The error in the console is
Uncaught SyntaxError: Unexpected token )
Any help to resolve this would be appreciated

You did not close the bracket after the first if statement. I've optimized your selectors for performance & readability:
jQuery(document).ready(function (jQ) {
jQ('.WorkType,.setTime').on("change", function () {
var $hours = jQ(this).closest('.DayTimeWrapper').find('.Hours');
var workType = jQ('.DayTimeWrapper').closest('.WorkType').val();
if (workType == 'Standard Hours') {
$hours.addClass("Calc_Hours");
$hours.removeClass("Calc_Leave");
$hours.removeClass("Calc_RDO");
} else if (workType == 'RDO') {
$hours.addClass("Calc_RDO");
$hours.removeClass("Calc_Leave");
$hours.removeClass("Calc_Hours");
} else {
$hours.addClass("Calc_Leave");
$hours.removeClass("Calc_RDO");
$hours.removeClass("Calc_Hours");
}
// The following code seems to be corrupt:
window.setTimeout(function () {
jQ(".Calc_Hours").sum("focusout", "#standard_hours");
jQ(".Calc_Leave").sum("focusout", "#leave_hours");
jQ(".Calc_RDO").sum("focusout", "#rdo_hours");
}, 1000);
})
});
Edit:
This seems to be what you want to do:
https://jsfiddle.net/mk07fof5/1/
$('.WorkType,.setTime').on("change", function() {
var $currRow = $(this).closest('.DayTimeWrapper'),
$allRows = $currRow.closest('.DayTimeTable').find('.DayTimeWrapper');
calculate($currRow); //pass the element which triggered the event
var CalcHours = 0,
MealHours = 0,
RdoHours = 0;
$allRows.each(function(i) {
$row = $(this);
var hours = ParseFloat($row.find('.Hours').val());
if(!hours) return;
var workType = $row.find('.WorkType').val();
switch (workType) {
case 'Standard Hours':
CalcHours += hours;
break;
case 'RDO':
RdoHours += hours;
break;
default:
MealHours += hours;
}
});
$("#standard_hours").html(CalcHours.toFixed(2));
$("#leave_hours").html(MealHours.toFixed(2));
$("#rdo_hours").html(RdoHours.toFixed(2));
});
Don't forget to wrap your table into this div:
<div class="DayTimeTable">[...]</div>

Checking a div for duplicates before appending to the list using jQuery

This should be trivial but I'm having issues...
Basically what I am trying to do is append a new "div" to "selected-courses" when a user clicks on a "course". This should happen if and only if the current course is not already in the "selected-courses" box.
The problem I'm running into is that nothing is appended to the "selected-courses" section when this is executed. I have used alert statements to make sure the code is in fact being run. Is there something wrong with my understanding of the way .on and .each work ? can I use them this way.
Here is a fiddle http://jsfiddle.net/jq9dth4j/
$(document).on("click", "div.course", function() {
var title = $( this ).find("span").text();
var match_found = 0;
//if length 0 nothing in list, no need to check for a match
if ($(".selected-course").length > 0) {
match_found = match(title);
}
if (matched == 0) {
var out = '<div class="selected-course">' + '' + title + ''+'</div>';
$("#selected-box").append(out);
}
});
//checks to see if clicked course is already in list before adding.
function match(str) {
$(".selected-course").each(function() {
var retval = 0;
if(str == this.text()) {
//course already in selected-course section
retval = 1;
return false;
}
});
return retval;
}

There was a couple of little issues in your fiddle.
See fixed fiddle: http://jsfiddle.net/jq9dth4j/1/
function match(str) {
var retval = 0;
$(".selected-course").each(function() {
if(str == $(this).text()) {
retval = 1;
return false;
}
});
return retval;
}
You hadn't wrapped your this in a jquery object. So it threw an exception saying this had no method text().
Second your retval was declared inside the each so it wasn't available to return outside the each, wrong scope.
Lastly the if in the block:
if (matched== 0) {
var out = '';
out += '<div class="selected-course">' + '' + title + ''+'</div>';
$("#selected-box").append(out);
}
was looking at the wrong variable it was looking at matched which didn't exist causing an exception.

Relying on checking what text elements contain is not the best approach to solve this kind of question. It is prone to errors (as you have found out), it can be slow, it gives you long code and it is sensitive to small changes in the HTML. I would recommend using custom data-* attributes instead.
So you would get HTML like this:
<div class="course" data-course="Kite Flying 101">
<a href="#">
<span>Kite Flying 101</span>
</a>
</div>
Then the JS would be simple like this:
$(document).on('click', 'div.course', function() {
// Get the name of the course that was clicked from the attribute.
var title = $(this).attr('data-course');
// Create a selector that selects everything with class selected-course and the right data-course attribute.
var selector = '.selected-course[data-course="' + title + '"]';
if($(selector).length == 0) {
// If the selector didn't return anything, append the div.
// Do note that we need to add the data-course attribute here.
var out = '<div class="selected-course" data-course="' + title + '">' + title + '</div>';
$('#selected-box').append(out);
}
});
Beware of case sensitivity in course names, though!
Here is a working fiddle.

Try this code, read comment for where the changes are :
$(document).on("click", "div.course", function () {
var title = $(this).find("span").text().trim(); // use trim to remove first and end whitespace
var match_found = 0;
if ($(".selected-course").length > 0) {
match_found = match(title);
}
if (match_found == 0) { // should change into match_found
var out = '';
out += '<div class="selected-course">' + '' + title + '' + '</div>';
$("#selected-box").append(out);
}
});
function match(str) {
var retval = 0; // this variable should place in here
$(".selected-course").each(function () {
if (str == $(this).find('a').text().trim()) { // find a tag to catch values, and use $(this) instead of this
retval = 1;
return false;
}
});
return retval; // now can return variable, before will return undefined
}
Updated DEMO

Your Issues are :
1.this.text() is not valid. you have to use $(this).text().
2.you defined var retval = 0; inside each statement and trying to return it outside each statement. so move this line out of the each statement.
3.matched is not defined . it should be match_found in line if (matched == 0) {.
4. use trim() to get and set text, because text may contain leading and trailing spaces.
Your updated JS is
$(document).on("click", "div.course", function () {
var title = $(this).find("span").text();
var match_found = 0;
if ($(".selected-course").length > 0) {
match_found = match(title);
}
if (match_found == 0) {
var out = '<div class="selected-course">' + '' + title + '' + '</div>';
$("#selected-box").append(out);
}
});
function match(str) {
var retval = 0;
$(".selected-course").each(function () {
if (str.trim() == $(this).text().trim()) {
retval = 1;
return false;
}
});
return retval;
}
Updated you Fiddle

Updating interval dynamically - jQuery or Javascript

I have two "stopwatches" in my code (and I may be adding more). This is the code I currently use below - and it works fine. But I'd really like to put the bulk of that code into a function so I'm not repeating the same code over and over.
When I tried doing it though, I could get it working - I think it was because I was passing stopwatchTimerId and stopwatch2TimerId into the function and it may have been passing by reference?
How can I reduce the amount of code repetition here?
var stopwatchTimerId = 0;
var stopwatch2TimerId = 0;
$('#stopwatch').click(function () {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
clearInterval(stopwatchTimerId);
}
else {
$(this).addClass('active');
stopwatchTimerId = setInterval(function () {
var currentValue = parseInt($('#stopwatch-seconds').val()) || 0;
$('#stopwatch-seconds').val(currentValue + 1).change();
}, 1000);
}
});
$('#stopwatch2').click(function () {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
clearInterval(stopwatch2TimerId);
}
else {
$(this).addClass('active');
stopwatch2TimerId = setInterval(function () {
var currentValue = parseInt($('#stopwatch2-seconds').val()) || 0;
$('#stopwatch2-seconds').val(currentValue + 1).change();
}, 1000);
}
});
As you can see, it's basically the same code in each except for stopwatchTimerId and $('#stopwatch-seconds') (and the same vars with 2 on it for the other one).

This won't pollute global scope and also you don't need to do any if-else statements. Just add data-selector to your new elements :)
<input id="stopwatch" type="text" data-selector="#stopwatch-seconds"/>
<input id="stopwatch2" type"text" data-selector="#stopwatch2-seconds"/>
$('#stopwatch stopwatch2').click(function () {
var $element = $(this),
interval = $element.data('interval');
selector = $element.data('selector');;
if ($element.hasClass('active')) {
$element.removeClass('active');
if (interval) {
clearInterval(interval);
}
}
else {
$element.addClass('active');
$element.data('interval', setInterval(function () {
var currentValue = parseInt($(selector).val()) || 0;
$(selector).val(currentValue + 1).change();
}, 1000));
}
});

function stopwatch(id){
$('#' + id).click(function () {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
clearInterval(window[id]);
}
else {
$(this).addClass('active');
window[id] = setInterval(function () {
var currentValue = parseInt($('#' + id + '-seconds').val()) || 0;
$('#' + id + '-seconds').val(currentValue + 1).change();
}, 1000);
}
});
}
$(function(){
stopwatch("stopwatch");
stopwatch("stopwatch2");
});

You could do something like this (code is not very nice, you can improve it):
var stopwatchTimerId;
$('#stopwatch').click(function () {
doStopWatch(1);
});
$('#stopwatch2').click(function () {
doStopWatch(2);
});
var doStopWatch = function(option){
var stopWatch = option===1?$('#stopwatch'):$('#stopwatch2');
if (stopWatch.hasClass('active')) {
stopWatch.removeClass('active');
clearInterval(stopwatchTimerId);
}
else {
stopWatch.addClass('active');
stopwatchTimerId = setInterval(function () {
var currentValue = option===1?(parseInt($('#stopwatch-seconds').val()) || 0):(parseInt($('#stopwatch2-seconds').val()) || 0);
if(option===1)
$('#stopwatch-seconds').val(currentValue + 1).change();
else
$('#stopwatch2-seconds').val(currentValue + 1).change();
}, 1000);
}
}

Try
var arr = $.map($("div[id^=stopwatch]"), function(el, index) {
el.onclick = watch;
return 0
});
function watch(e) {
var id = this.id;
var n = Number(id.split(/-/)[1]);
if ($(this).hasClass("active")) {
$(this).removeClass("active");
clearInterval(arr[n]);
} else {
$(this).addClass("active");
arr[n] = setInterval(function() {
var currentValue = parseInt($("#" + id + "-seconds").val()) || 0;
$("#" + id + "-seconds").val(currentValue + 1).change();
}, 1000);
}
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="stopwatch-0">stopwatch1</div>
<input type="text" id="stopwatch-0-seconds" />
<div id="stopwatch-1">stopwatch2</div>
<input type="text" id="stopwatch-1-seconds" />

Js and Divs, (even <div> is difference)

I Have find a javascript code that works perfectly for showing a DIV.
but this code works only for showing one div for each page.
i want to include many DIVS for hiding and showing in the same page.
I was try to replace the div id and show/hide span id with a rundom php number for each include, but still is not working.
so how i have to do it?
the JS code:
var done = true,
fading_div = document.getElementById('fading_div'),
fade_in_button = document.getElementById('fade_in'),
fade_out_button = document.getElementById('fade_out');
function function_opacity(opacity_value) {
fading_div.style.opacity = opacity_value / 100;
fading_div.style.filter = 'alpha(opacity=' + opacity_value + ')';
}
function function_fade_out(opacity_value) {
function_opacity(opacity_value);
if (opacity_value == 1) {
fading_div.style.display = 'none';
done = true;
}
}
function function_fade_in(opacity_value) {
function_opacity(opacity_value);
if (opacity_value == 1) {
fading_div.style.display = 'block';
}
if (opacity_value == 100) {
done = true;
}
}
// fade in button
fade_in_button.onclick = function () {
if (done && fading_div.style.opacity !== '1') {
done = false;
for (var i = 1; i <= 100; i++) {
setTimeout((function (x) {
return function () {
function_fade_in(x)
};
})(i), i * 10);
}
}
};
// fade out button
fade_out_button.onclick = function () {
if (done && fading_div.style.opacity !== '0') {
done = false;
for (var i = 1; i <= 100; i++) {
setTimeout((function (x) {
return function () {
function_fade_out(x)
};
})(100 - i), i * 10);
}
}
};

Check out the Fiddle, you can edit code based on your needs ;)
$(function() {
$('.sub-nav li a').each(function() {
$(this).click(function() {
var category = $(this).data('cat');
$('.'+category).addClass('active').siblings('div').removeClass('active');
});
});
});

finaly i found my self:
<a class="showhide">AAA</a>
<div>show me / hide me</div>
<a class="showhide">BBB</a>
<div>show me / hide me</div>
js
$('.showhide').click(function(e) {
$(this).next().slideToggle();
e.preventDefault(); // Stop navigation
});
$('div').hide();
Am just posting this in case someone was trying to answer.