We Keep Coding

Getting global var to use in a function

I'm working with this code to play and pause several audios:
jQuery(document).ready(function(){
var getaudio;
var audiostatus = 'off';
var current_id;
jQuery(document).on('click touchend', '.speaker', function() {
elemento = jQuery(this);
current_id = elemento.children("audio").attr("id");
clase = current_id.replace(/player/, '');
if (!jQuery('.c'+clase).hasClass("speakerplay")) {
getaudio = jQuery('#'+current_id)[0];
if (audiostatus == 'off') {
jQuery('.c'+clase).addClass('speakerplay');
getaudio.load();
getaudio.play();
audiostatus = 'on';
return false;
} else if (audiostatus == 'on') {
jQuery('.c'+clase).addClass('speakerplay');
getaudio.play()
}
} else if (jQuery('.speaker').hasClass("speakerplay")) {
getaudio.pause();
jQuery('.c'+clase).removeClass('speakerplay');
audiostatus = 'on';
}
});
// Here is my problem: I need to get the value of current_id...
jQuery('#'+current_id).on('ended', function() {
jQuery('.speaker').removeClass('speakerplay');
audiostatus = 'off';
});
});
In the last function I want to remove the class 'speakerplay' once the audio reached the end, but I can't get the value of current_id
Could anybody help me with this?
Thanks in advance!

don't use
var current_id;
use window.current_id directly
window.current_id = elemento.children("audio").attr("id");
jQuery('#'+window.current_id).on('ended', function() {

JS Retain Initial Value Obtained from Div after Changes to Div from JS itself

I have the following code:
<script>
document.getElementsByName("region").forEach(function(node) {
node.addEventListener("keyup", myFunction);
});
function myFunction() {
var currentPrice = document.getElementById('ms2_order_cost').innerHTML;
if (document.getElementById("region").value == "Ohio" || document.getElementById("region").value == "ohio") {
var currentPriceF = parseFloat(currentPrice);
var newPrice = currentPriceF * 1.0725;
document.getElementById("ms2_order_cost").innerHTML = newPrice;
}
else {
document.getElementById("ms2_order_cost").innerHTML = newPrice;
}
return false;
}
</script>
What I would like is that in the else statement, I get the original value of the div (not the one which is displaying after the If condition is trigerred).
How can I achieve that?

Once you get the initial price from ms2_order_cost and store it in currentPrice, you're not actually manipulating this variable any further. As such, you can simply change your else statement to use currentPrice instead of newPrice:
else {
document.getElementById("ms2_order_cost").innerHTML = currentPrice;
}
As can be seen in the following:
document.getElementsByName("region").forEach(function(node) {
node.addEventListener("keyup", myFunction);
});
function myFunction() {
var currentPrice = document.getElementById('ms2_order_cost').innerHTML;
if (document.getElementById("region").value == "Ohio" || document.getElementById("region").value == "ohio") {
var currentPriceF = parseFloat(currentPrice);
var newPrice = currentPriceF * 1.0725;
document.getElementById("ms2_order_cost").innerHTML = newPrice;
} else {
document.getElementById("ms2_order_cost").innerHTML = currentPrice;
}
return false;
}
Assuming you want to get the value on page load rather than after your trigger, you need to assign the variable after the page loads, but before the function is triggered:
window.onload = function() {
var initialPrice = document.getElementById('ms2_order_cost').innerHTML;
}
And then make use of this variable, as is seen in the following:
window.onload = function() {
var initialPrice = document.getElementById('ms2_order_cost').innerHTML;
}
document.getElementsByName("region").forEach(function(node) {
node.addEventListener("keyup", myFunction);
});
function myFunction() {
var currentPrice = document.getElementById('ms2_order_cost').innerHTML;
if (document.getElementById("region").value == "Ohio" || document.getElementById("region").value == "ohio") {
var currentPriceF = parseFloat(currentPrice);
var newPrice = currentPriceF * 1.0725;
document.getElementById("ms2_order_cost").innerHTML = newPrice;
} else {
document.getElementById("ms2_order_cost").innerHTML = initialPrice;
}
return false;
}
Note that this will only work if the element is available on page load! If it is not, substitute window.onload() for whatever causes your element to be added to the DOM.
Hope this helps! :)

Place parts of a for loop into function in javascript

I have several functions that use this given for loop below.
function startClaw(dir){
var readCount = 0;
for(var isRead in qdata){
readCount++;
if(qdata[isRead]['reading'] == true){
return;
}else if(readCount == 5){
isAnimating = $("#claw").is(':animated');
if(!isAnimating){// prevents multiple clicks during animation
if(isMoving || isDropping){ return; }
MCI = setInterval(function(){ moveClaw(dir); },10);
//console.log("startClaw:" + dir);
stopSwingClaw();
}
}
}
}
//.................................................................
function dropClaw(){
var readCount = 0;
for(var isRead in qdata){
readCount++;
if(qdata[isRead]['reading'] == true){
return;
}else if(readCount == 5){
if(isDropping){ return; } //prevent multiple clicks
stopSwingClaw();
isDropping = true;
MCI = setInterval(moveDown,20); //start heartbeat
}
}
}
Everything in the else if statement is different within the various functions. I'm wondering if there is any way to place the "pieces" of the for loop on the outside of the else if into its very own function. I feel like I've seen this or had done this a very long time ago, but it escapes me and I couldn't find any examples. Thanks everyone!

Previewing, I see this is similar to the above. Two differences (it looks like) are here the count gets passed to the function in case they needed to ever have different checks in the if statement, and, it's checking what the return value is since it looks like you return out of the loop if the condition is met. There are notes in comments in the code below.
function startClaw(dir) {
// Pass a function as a callback to the method which expects to receive the count as a param
doReadCount(qdata, function(theCount) {
if (theCount === 5) {
isAnimating = $("#claw").is(':animated');
if (!isAnimating) { // prevents multiple clicks during animation
if (isMoving || isDropping) {
return true;
}
MCI = setInterval(function() { moveClaw(dir); }, 10);
//console.log("startClaw:" + dir);
stopSwingClaw();
}
return false;
});
}
//.................................................................
function dropClaw() {
// Pass a function as a callback to the method which expects to receive the count as a param
doReadCount(qdata, function(theCount) {
if (theCount === 5) {
if (isDropping) {
return;
} //prevent multiple clicks
stopSwingClaw();
isDropping = true;
MCI = setInterval(moveDown,20); //start heartbeat
}
});
}
function doReadCount(qdata, elseFunction) {
var readCount = 0;
var elseReturn;
for (var isRead in qdata) {
readCount++;
if (qdata[isRead]['reading'] == true) {
return;
} else {
// call the function that was sent and pass it the current read count. If the return is true, then also return true here
elseReturn = elseFunction(readCount);
if (elseReturn) {
return;
}
}
}
}

You can pass a function into another function to achieve this. I've done it for dropClaw, and it should be clear from my example how to do also extract startClaw.
function operateClaw(func){
var readCount = 0;
for(var isRead in qdata){
readCount++;
if(qdata[isRead]['reading'] == true){
return;
}else if(readCount == 5){
func();
}
}
}
function drop () {
if(isDropping){ return; } //prevent multiple clicks
stopSwingClaw();
isDropping = true;
MCI = setInterval(moveDown,20); //start heartbeat
}
function dropClaw () {
operateClaw(drop);
}

Play/pause audio file with javascript command

I have some javascript code that gets executed once somebody enters the konami code, and I want it to play if it isn't playind, and pause if it is playing. My code seems to be just wrong. Please help!
var rick = false;
var audio = new Audio('rick_roll.mp3');
var kkeys = [],
konami = "38,38,40,40,37,39,37,39,66,65,13";
$(document).keydown(function(e) {
kkeys.push(e.keyCode);
if (kkeys.toString().indexOf(konami) >= 0) {
$(document).unbind('keydown', arguments.callee);
if (rick == false) {
rick = true;
audio.play();
} else if (rick == true) {
rick = false;
audio.stop();
}
}
});

You should be doing something like this:
var rick = false;
var audio = new Audio('rick_roll.mp3');
var kkeys = [],
konami = "38,38,40,40,37,39,37,39,66,65,13";
$(document).keydown(function(e) {
kkeys.push(e.keyCode);
if (kkeys.toString().indexOf(konami) >= 0) {
kkeys = []; // <-- Change here
if (rick == false) {
rick = true;
audio.play();
} else if (rick == true) {
rick = false;
audio.pause(); // <-- another issue
}
}
});
You're unbinding the event listener after you get the code entered. You should instead clean old data and start waiting for it again.

Javascript Events using HTML Class Targets - 1 Me - 0

I am trying to create collapsible DIVs that react to links being clicked. I found how to do this using "next" but I wanted to put the links in a separate area. I came up with this which works...
JSFiddle - Works
function navLink(classs) {
this.classs = classs;
}
var homeLink = new navLink(".content-home");
var aboutLink = new navLink(".content-about");
var contactLink = new navLink(".content-contact");
var lastOpen = null;
$('.home').click(function() {
if(lastOpen !== null) {
if(lastOpen === homeLink) {
return; } else {
$(lastOpen.classs).slideToggle('fast');
}
}
$('.content-home').slideToggle('slow');
lastOpen = homeLink;
}
);
$('.about').click(function() {
if(lastOpen !== null) {
if(lastOpen === aboutLink) {
return; } else {
$(lastOpen.classs).slideToggle('fast');
}
}
$('.content-about').slideToggle('slow');
lastOpen = aboutLink;
}
);
$('.contact').click(function() {
if(lastOpen !== null) {
if(lastOpen === contactLink) {
return; } else {
$(lastOpen.classs).slideToggle('fast');
}
}
$('.content-contact').slideToggle('slow');
lastOpen = contactLink;
}
);​
I am now trying to create the same result but with a single function instead of one for each link. This is what I came up with....
function navLink(contentClass, linkClass, linkId) {
this.contentClass = contentClass;
this.linkClass = linkClass;
this.linkId = linkId;
}
var navs = [];
navs[0] = new navLink(".content-home", "nav", "home");
navs[1] = new navLink(".content-about", "nav", "about");
navs[2] = new navLink(".content-contact", "nav", "contact");
var lastOpen = null;
$('.nav').click(function(event) {
//loop through link objects
var i;
for (i = 0; i < (navsLength + 1); i++) {
//find link object that matches link clicked
if (event.target.id === navs[i].linkId) {
//if there is a window opened, close it
if (lastOpen !== null) {
//unless it is the link that was clicked
if (lastOpen === navs[i]) {
return;
} else {
//close it
$(lastOpen.contentClass).slideToggle('fast');
}
}
//open the content that correlates to the link clicked
$(navs[i].contentClass).slideToggle('slow');
navs[i] = lastOpen;
}
}
});​
JSFiddle - Doesn't Work
No errors so I assume that I am just doing this completely wrong. I've been working with Javascript for only about a week now. I've taken what I've learned about arrays and JQuery events and tried to apply them here. I assume I'm way off. Thoughts? Thanks

You just forgot to define navsLength:
var navsLength=navs.length;
Of course you could also replace it with a $().each loop as you're using jQuery.
[Update] Two other errors I corrected:
lastOpen=navs[i];
for(i=0; i < navsLength ; i++)
Demo: http://jsfiddle.net/jMzPJ/4/

Try:
var current, show = function(){
var id = this.id,
doShow = function() {
current = id;
$(".content-" + id).slideToggle('slow');
},
toHide = current && ".content-" + current;
if(current === id){ //Same link.
return;
}
toHide ? $(toHide).slideToggle('fast', doShow): doShow();;
};
$("#nav").on("click", ".nav", show);
http://jsfiddle.net/tarabyte/jMzPJ/5/