I am using this codepen template
https://codepen.io/stevethorson/pen/nisBh for quiz competition. I have 10 div elements all are set to display none except the first div, when this timer gets reset, it will change my next div display and hide the previous div display.
how to stop that timer resetting when it complete 10 resets and make my 10th div not to hide? all the id of div are in array.
the changes i made at the bottom of js code in that template is,
var Timer;
let ids=["aq","bq","cq","dq","eq","fq","gq","hq","iq","jq"];
var i=0;
var j=1;
$(document).ready(function() {
var callbackFunction = function(){
Timer.reset(2);
i+=1;
j+=1;
$('h3').html('Question Number:'+j+'');
document.getElementById(ids[i-1]).style.display = "none";
document.getElementById(ids[i]).style.display = "";
};
Timer = new radialTimer(callbackFunction);
Timer.init("timer", 2);
});
so i want my last div to appear permanently
Timer.start(t);
while (j >2) {
timer.stop(a); // name that callback function as a and if it gets incremented i,e resetted untill some reseets, just use while loop and stop that funcion a.
}
}
}
var Timer;
let ids=["aq","bq","cq"];
var i=0;
var j=1;
$(document).ready(function() {
var callbackFunction = function(a){ //function a
Timer.reset(2);
i+=1;
j+=1;
$('h3').html('Question:'+j+'');
document.getElementById(ids[i-1]).style.display = "none";
document.getElementById(ids[i]).style.display = "";
};
Timer = new radialTimer(callbackFunction);
Timer.init("timer", 2);
});
Related
Trying to make it so this counter with buttons increases or decreases based on clicks, however on the first click the counter doesn't increase. If I do + 1 it will but then will stop. ++works but only after first click. Trying to learn easy way to resolve my code that isn't a drastic change.
https://jsfiddle.net/sy0ohtrc/
var pageCount = 1;
var elPage = document.getElementById("currentPage");
elPage.innerHTML = pageCount;
//Get next button and add connect function on click
var elNext = document.getElementById("nextButton");
elNext.addEventListener("click", nextPage);
function nextPage() {
var elPageIncrease = document.getElementById("currentPage");
elPageIncrease.innerHTML = pageCount++;
}
var elPrev = document.getElementById("prevButton");
elPrev.addEventListener("click", prevPage);
function prevPage() {
var elPageDecrease = document.getElementById("currentPage");
elPageDecrease.innerHTML = pageCount--;
}
You should use --/++ before the counter because when you use the increment/decrement operator after, the value will be returned before the it increased/decreased.
AND there is no need for declaring 3 time the same element.
Finally change the innerHTML to textContent (and if you want to know why read this thread).
Your code should look something like that:
var pageCount = 1;
var elPage = document.getElementById("currentPage");
elPage.textContent = pageCount;
//Get next button and add connect function on click
var elNext = document.getElementById("nextButton");
elNext.addEventListener("click", nextPage);
function nextPage() {
// var elPageIncrease = document.getElementById("currentPage"); you have elPage already pointing this element
elPage.textContent = ++pageCount;
}
var elPrev = document.getElementById("prevButton");
elPrev.addEventListener("click", prevPage);
function prevPage() {
// var elPageDecrease = document.getElementById("currentPage"); you have elPage already pointing this element
elPage.textContent = --pageCount;
}
<div class="pager">
<button id="prevButton">prev</button>
<p class="pageNumber" id="currentPage"></p>
<button id="nextButton">next</button>
</div>
I have an array of audio files that I want to play through whenever I click a button. If I click said button, it will play the next audio file in the array. Also, if audio is currently playing when the user clicks again, the current track is reset and the next song plays.
Trying to figure out why I can't cycle through the array I currently have.
var song1 = $("#sound-1");
var song2 = $("#sound-2");
var song3 = $("#sound-3");
var song4 = $("#sound-4");
var song5 = $("#sound-5");
var song6 = $("#sound-6");
var song7 = $("#sound-7");
var song8 = $("#sound-8");
var audioArray = [ song1, song2, song3, song4, song5, song6, song7, song8 ];
$(".click").click(function(){
var i=0;
if (i< audioArray.length){
audioArray[i].trigger('play');
i++;
} else if ( i>audioArray.length){
i = 0;
audioArray[i].trigger('play');
};
});
Updated answer:
Since you are using the native HTML5 interface, there is a pause event that can be triggered as well. Unfortunately, there is no stop event that would reset the time, however we can set it to 0 manually using the currentTime property.
var i=0;
var lastPlayedFile = null;
$(".click").click(function(){
if(lastPlayedFile !== null) {
lastPlayedFile[0].currentTime = 0; // [0] because we need a native DOM element, not a jQuery-wrapped one
lastPlayedFile.trigger('pause');
}
if (i< audioArray.length){
lastPlayedFile = audioArray[i];
audioArray[i].trigger('play');
i++;
} else if (i>=audioArray.length){ // there was a missing '=' in this condition to work properly
i = 0;
lastPlayedFile = audioArray[0];
audioArray[i].trigger('play');
};
});
Here is a fiddle I created. I've tested it in Chrome and it works flawlessly.
I suggest looking at the audio tag reference to see what more you can achieve by manipulating the native DOM audio element.
Original answer:
Move declaration of i outside the click handler.
var i=0;
$(".click").click(function(){
if (i< audioArray.length){
audioArray[i].trigger('play');
i++;
} else if ( i>audioArray.length){
i = 0;
audioArray[i].trigger('play');
};
});
You were resetting it's value to 0 each time user clicked the button.
I have many <div> each containing another div that's my button. I have an .one('click', '.button', function(){}); that activates on each click and increments a number in a single div elsewhere.
var barPrimC = 25;
var barPrimN = 6;
var barPrimS = 5;
var barPrimT = 48;
var barSecMajC = 11;
var barSecMajN = 2;
var barSecMajS = 3;
var barSecMajT = 19;
var incSL
$('.complete, .incomplete').click(function() {
$('.classInfo').slideUp();
if($(this).next().is(':hidden') == true) {
$(this).addClass('on');
$(this).next().show('slow');
incSL = this;
// ADD to List
$(".shortAdd").one('click','.button', function(){
$(this).text('Remove from Short List');
$(this).parent().attr("class", "shortRemove");
$(incSL).attr("class", "incompleteSL");
$('.classInfo').slideUp();
barPrimS++;
barSecMajS++;
var updateBarP = $(".bpS").find(".b-text-right").text(barPrimS);
var cat = $(this).data("category");
var catBar = $("."+cat).find(".bCommonS");
var updateBarS = catBar.filter(".bsS").find(".s-text-right").text(barSecMajS);
});
// REMOVE from List
$(".shortRemove").one('click','.button', function(){
$(this).text('Add to Short List');
$(this).parent().attr("class", "shortAdd");
$(incSL).attr("class", "incomplete");
$('.classInfo').slideUp();
barPrimS--;
barSecMajS--;
var updateBarP = $(".bpS").find(".b-text-right").text(barPrimS);
var cat = $(this).data("category");
var catBar = $("."+cat).find(".bCommonS");
var updateBarS = catBar.filter(".bsS").find(".s-text-right").text(barSecMajS);
});
}
});
I was originally using .on but it was activating both of my methods (for ADD and REMOVE clicks).
If I have :
<div>1st time div CLICKED (runs 1 time)</div>
<div>2nd time div CLICKED (runs 2 times)</div>
<div>3rd time div CLICKED (runs 3 times)</div>
<div>4th time div CLICKED (runs 4 times)</div>
So basically if barPrimS starts off at 5, it goes to 6 when the add click method is ran. When a separate add click method is ran, it goes to 8. Then to 11 then to 15.
I can't figure out why this is happening, please help! Should increment by only 1 (5, 6, 7, 8). I've tried barPrimS = barPrimS + 1 and other ways, but they all do the same.
I ended up removing the .shortAdd and .shortRemove .on('click') methods from within the parent click even, as suggested, and didn't nest them. I then combined the short and add as an if/else statement under the .shortAdd and simply .toggleClass() with the .shortRemove class, checking to see if it existed.
This fixed all errors for me.
Well, one more question. Since I started learning javascript short time ago, I am almost obsessed trying new things! Here it goes:
Let's say that I have an array of strings and I want to iterate on it with a navigation menu with the buttons FIRST, PREVIOUS, NEXT, LAST.
Look at this code:
var thearray = ["article1", "article2", "article3"];
var thebody = document.getElementsByTagName('body')[0];
var divcontainer = document.createElement("div");
var divpage = document.createElement("div");
function generatepage(article) {
var paragraph = document.createElement("p");
var name = document.createTextNode(thearray[article]);
paragraph.appendChild(name);
divpage.appendChild(paragraph);
}
divcontainer.appendChild(divpage);
thebody.appendChild(divcontainer);
generatepage(0); // that would be for the first article
I also figured out that generatepage(thearray.length -1)would be the call for the last article, so I have solved two buttons (before generating new content I would erase it with innerHTMLbut what I cannot think about how to do are the PREVIOUS and NEXT buttons...
Do you have any suggestion about how should I get started to make working PREVIOUS and NEXT?
I attach a JSFiddle
Thank you so much for any advice!
You can save the active page in a variable outside the function:
var page = 0;
Then you don’t need to bring any page into generatepage():
function generatepage() {
var paragraph = document.createElement("p");
var name = document.createTextNode(thearray[page]);
paragraph.appendChild(name);
divpage.appendChild(paragraph);
}
Now you can control the page from outside the function:
var next = function() {
if ( page < page.length-1 ) { page++; }
}
var prev = function() {
if ( page ) { page--; }
}
So to show the first page:
page = 0;
generatepage()
And the next:
next();
generatepage()
etc.... There are other ways too of course but this might give you an idea.
You can save a variable outside the scope of the function to memorize the current article
when you add Eventlisteners to the buttons you can call the next and previous item
but you should somehow replace the content of the div with the next one instead of appending it (i don't know a thing about manipulating dom elements)
you could try something like this:
var thearray = ["article1", "article2", "article3"];
var thebody = document.getElementsByTagName('body')[0];
var divcontainer = document.createElement("div");
var divpage = document.createElement("div");
var currentarticle
function generatepage(article) {
if(thearray[article]) {
currentarticle = article
var paragraph = document.createElement("p");
var name = document.createTextNode(thearray[article]);
paragraph.appendChild(name);
divpage.innerHTML= paragraph.innerHTML
}else {
return false
}
}
divcontainer.appendChild(divpage);
thebody.appendChild(divcontainer);
generatepage(0); // that would be for the first article
document.getElementById("next").addEventListener("click",function() {
generatepage(currentarticle + 1)
});
document.getElementById("previous").addEventListener("click",function() {
generatepage(currentarticle - 1)
});
document.getElementById("last").addEventListener("click",function() {
generatepage(thearray.length - 1)
});
document.getElementById("first").addEventListener("click",function() {
generatepage(0)
});
heres the Fiddle
I'm trying to disable a button, hide a select list & show some text once a button is clicked... because of how long the javascript can take I am using timeouts to prevent the browser locking & the browser ending it prematurely or presenting a warning... however the code I have doesn't seem to be hiding/disabling/showing the elements once the button is clicked.
Edit: I have confirmed that the elements ARE getting hidden & then reshown, however they are being reshown too early.... the javascript hasn't finished doing what it's doing & they are reshown almost instantly after they are hidden.
Edit 2: Fixed it by moving the code that reshows the select list etc from the "addCatsSICMain" function to the "addCatsSIC" function as so..
if (spot < cats.options.length) {
other code here...
} else {
reshow select list etc code here
}
Here is the code:
This first function is the one that is called once the button is clicked.
function addCatsSICMain() {
// Set elements
var addBtn = document.getElementById('add');
var cat_sel = document.getElementById('cat_sic_sel_wrapper');
var addWait = document.getElementById('addWait');
// Disable add button
addBtn.disabled = true;
// Hide selected list
cat_sel.style.display = 'none';
// Show waiting text
addWait.style.display = 'block';
// Use a timeout function so button can be hid/show when we want successfully & not on function completion
setTimeout(function(){
// Add selected cats
addCatsSIC(0);
// Reshow selected list, reenable add button & hide wwaiting text
addWait.style.display = 'none';
cat_sel.style.display = 'block';
addBtn.disabled = false;
}, 10);
}
function addCatsSIC(spot) {
// Set the search results box
var cats = document.getElementById('cat_sic_list');
// Set the selected categories list that we are adding to..
var sel_cats = document.getElementById('cat_sic_sel');
// Set selcted counter var
var sel_count = 0;
// Set category add failed var
var failed = 0;
// Set batch size for looping
var batchSize = 50;
// Still more to do?
if (spot < cats.options.length) {
// Loop through categories from the search results select box
for (var i = spot; i < spot + batchSize && i < cats.options.length; i++) {
// Check if the cat is selected
if (cats.options[i].selected == true) {
// Set this category's values to some variables
var cat_id = cats.options[i].getAttribute('value');
var cat_name = cats.options[i].text;
if (checkCatSICAdd(cat_id) === false) {
// Now we create the new element
var new_option = document.createElement('option');
// Add attribute
new_option.setAttribute('value',cat_id);
// Create text node
var new_text_node = document.createTextNode(cat_name);
// Append new text node to new option element we created
new_option.appendChild(new_text_node);
// Append new option tag to select list
sel_cats.appendChild(new_option);
} else {
failed++;
}
}
}
var nextBitOfWork = function() { addCatsSIC(spot + batchSize) };
// Hand control back to the browser so it can update the page & not timeout & then restart the function
setTimeout(nextBitOfWork, 50);
}
if (failed > 0) {
// Find out if more than 2 cats were selected
for (var i = 0; i < cats.options.length; i++) {
if (cats.options[i].selected == true) {
sel_count++;
}
if (sel_count == 2) {
break;
}
}
// Give them an alert they have added that category already
/*addedCatSICAlert(sel_count);*/
}
}
Any reason why you are not using jQuery for this. You can disable button, hide select box and show elements by doing the following
$('button').click(function() {
$(this).attr('disabled', 'disabled');
$('select').hide();
$('p').show();
})
check working example at http://jsfiddle.net/N697c/1/
Fixed it by moving the code that reshows the select list etc from the "addCatsSICMain" function to the "addCatsSIC" function as so..
if (spot < cats.options.length) {
other code here...
} else {
reshow select list etc code here...
}