Combine 2 jQuery functions

Question

0.00/5 (No votes)

See more:

Hello,

I've been tryin for a while to combine 2 functions in my code but I cant get it to work properly. I hope someone can help me out...

1st

JavaScript

function formatTime(seconds) {
    var h = Math.floor(seconds / 3600),
        m = Math.floor(seconds / 60) % 60,
        s = seconds % 60;
    if (h < 10) h = "0" + h;
    if (m < 10) m = "0" + m;
    if (s < 10) s = "0" + s;
    return h + ":" + m + ":" + s;
}
var count = 5;
var counter = setInterval(timer, 1000);

function timer() {
   count--;
   if (count < 0) return clearInterval(counter);
  document.getElementById('timer').innerHTML = formatTime(count);
}

2nd

JavaScript

$(document).ready(function(){
$("button").click(function () {
    $(".verwijder").eq(0).remove();
});
});

The first piece of code is a timer. When the timer is 0 or 00:00:00 I want the 2nd piece of code to happend which will result in deleting a list item.

Below you see the list that will have its first item removed when the timer is over

HTML

<div id="vakjesdiv">
	<ul>
		<li class="verwijder"><img class="aanbieding" src="images/jack.png"> <span id="timer"></span></li>
		<li class="verwijder"><img class="aanbieding" src="images/kpn.png">	<span id="timer2"></li>
		<li class="verwijder"><img class="aanbieding" src="images/mac.png"></li>
		<li class="verwijder"><img class="aanbieding" src="images/pathe.png"></li>
	</ul>
</div>

I've a live demo here http://tinyurl.com/nam3hkr[^]

If you click on the button on the top right you will see the effect I want to create.

Posted 13-Oct-14 23:07pm

Member 11140766

Updated 14-Oct-14 2:02am

v3

Add a Solution

Comments

[no name] 14-Oct-14 7:54am

Why do you want to combine?? What role will the timer play in removing one of the html tag??

Member 11140766 14-Oct-14 7:59am

Well, Iam creating a page for discounts (just for practice). The discounts timer is counting down as you can see on the demo. When the time is over the discount should be removed.

Later I want to add a timer to all 4 of them and when one is removed a new one gets added. But thats later :p

[no name] 14-Oct-14 8:06am

then the place where you are checking the time, i.e. when the time is zero put the
$("button").click(function () {
$(".verwijder").eq(0).remove();
});
there. This would work out I guess!

Member 11140766 14-Oct-14 8:23am

function timer() {
count--;
if (count < 0) return clearInterval(counter);
document.getElementById('timer').innerHTML = formatTime(count);
$(".verwijder").eq(0).remove();
}

You mean like this? This isnt working, Now it will remove the list immediately without waiting for the time to be at 0

[no name] 14-Oct-14 8:27am

Is that peice of statement executed inside the If statement!!!

[no name] 14-Oct-14 8:28am

Put that return statement and the statement after that afterthe execution of remove inside the if statement.

Member 11140766 14-Oct-14 8:45am

function timer() {
count--;
if (count < 0)
$(".verwijder").eq(0).remove();
return clearInterval(counter);
document.getElementById('timer').innerHTML = formatTime(count);
}

If I get you right you mean like this?

[no name] 14-Oct-14 8:47am

function timer() {
count--;
if (count < 0) {
$(".verwijder").eq(0).remove();
return clearInterval(counter);
document.getElementById('timer').innerHTML = formatTime(count);
}
}
Try this please!!

Member 11140766 14-Oct-14 9:10am

Hmm yea this works like I want it only now I dont see my timer anymore!?

You can see it here ;)

http://eduweb.hhs.nl/~11028416/html/

[no name] 14-Oct-14 9:14am

I have added this as a solution. Please accept if this has helped you.
and regarding timer...I am checking. :)

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Suraj Sahoo | Coding Passion · Accepted Answer · 2014-10-14T03:13:00

Solution 1

C#

function timer() {
count--;
if (count < 0) {
$(".verwijder").eq(0).remove();
return clearInterval(counter);
document.getElementById('timer').innerHTML = formatTime(count);
}
}

Try like this please.

Posted 14-Oct-14 3:13am

Suraj Sahoo | Coding Passion

Comments

Member 11140766 14-Oct-14 9:35am

Now we have to fix the timer comes back:p

[no name] 14-Oct-14 9:38am

sure..:)

[no name] 14-Oct-14 9:39am

Increase the timer time and then check if the timer is coming in the console html section.

Member 11140766 14-Oct-14 9:50am

Nop...

http://i58.tinypic.com/343g5c5.png

[no name] 14-Oct-14 9:52am

That means the overlay for timer or a span whatever you have used isnot coming to the view itself..
What is the code for getting the Timer!!

[no name] 14-Oct-14 9:53am

Try with putting the
document.getElementById('timer').innerHTML = formatTime(count);
before the return statement.

Member 11140766 14-Oct-14 9:55am

function timer() {
count--;
if (count < 0) {
$(".verwijder").eq(0).remove();
document.getElementById('timer').innerHTML = formatTime(count);
return clearInterval(counter);
}
}

Doesnt work, It will even remove all the list items after the time has ended

[no name] 14-Oct-14 9:57am

acha tell me what is the code for the timer to be shown.

Member 11140766 14-Oct-14 9:59am

<span id="timer"></span>

thats what ya mean right?

[no name] 14-Oct-14 11:45am

yes
I mean this

[no name] 14-Oct-14 11:46am

Sorry for late reply I was out office. Yes exactly thattag is whati meant.

Member 11140766 14-Oct-14 12:04pm

No problem, I've put it on unsolved for until I found a way to get the timer back:p

[no name] 14-Oct-14 12:05pm

No issues with that. I want the problem to be solved :)

[no name] 14-Oct-14 12:07pm

what is exactly the problem we can get that in the console i guess. That span tag gets rendered how?? Can you tell me the logic you are following for the timer to be shwon!!

Member 11140766 14-Oct-14 12:29pm

function timer() {
count--;
if (count < 0) {
$(".verwijder").eq(0).remove();
document.getElementById('timer').innerHTML = formatTime(count);
return clearInterval(counter);
}
}

Iam not entirely sure but I guess document.getElementById('timer') makes the ID timer and when I span it in my html the timer appears.

[no name] 14-Oct-14 12:31pm

Now using this code the span does not come!! Checked in console!!

Member 11140766 14-Oct-14 12:58pm

uhu, what can we do to fix this?

[no name] 14-Oct-14 13:00pm

Instead of using document.getElementById use
$("#timer").html(formatTime(count)); Directly use the ID and check please.

Member 11140766 14-Oct-14 13:03pm

function timer() {
count--;
if (count < 0) {
$(".verwijder").eq(0).remove();
return clearInterval(counter);
$("#timer").html(formatTime(count));
}
}

Works the same as with document.getElementById

[no name] 14-Oct-14 13:11pm

Ok got you buddy.
Litsen just tell me now the Images get removed as u want!!

Member 11140766 14-Oct-14 13:15pm

Iam not entirely sure what you mean. Is it maybe an idea that I upload everything so you can download my files and you can check the code?

[no name] 14-Oct-14 13:17pm

ok it is better can ucome to google hangout??
suraj.0241@gmail.com
This will be too easy.

Member 11140766 14-Oct-14 13:23pm

Done.