baffeled on why only one javascript function is being called

Q695 · May 9, 2014

What's wrong with this testing script (psudocode):

function flippage() {
    var up, max, min, ;

    min = 0; //closed state closed state value
    max = 60; //maximum able to open

    if (typeof up === 'undefined') {
        up = min;
        // foo does not exist
    }

    //buggy code start
    if (up < max) {
        lower.onclick = increase;
    } else {
        lower.onclick = reduce;
    }
    //buggy code end

    function increase() {
alert ("up is increased");
up = max;
    }

        function reduce() {
alert ("up is reduced");
up = min;
        }
}

        window.addEventListener("load", upward());

I want it with the GT/LT operator.

Jacques1 · May 9, 2014

Your question doesn't get better through repetition.

I know it's hard to describe a problem. But please realize that none of us can read your mind. To you, it may be totally clear what this code is supposed to do and how it fails. But we see the code for the very first time and know absolutely nothing about the thought process behind it.

That means you have to actually give us this information:

What do you expect the code to do? What is the desired result?
What do you get instead?

Again, we know nothing about your goals, your project, your ideas or why you're unsatisfied with the code. You have to actually write it down.

Q695 · May 9, 2014

What do you expect the code to do? What is the desired result?

The code is to tack a show/hide screen onto either a web page that can show/hide the content of that tab (finished product). you could also adapt it to a smart phone. I just can't get the function calling to work for some reason.

What do you get instead?

The first function triggers, but not the 2nd one.

Q695 · May 9, 2014

Basically it's a way they to do on here the click on your id, and the window opens up.

Q695 · May 9, 2014

It doesn't seem to be working in fiddle, but it works in WAMP.

Example: http://jsfiddle.net/WH7Kf/60/

Jacques1 · May 9, 2014

I think there are some general misconceptions.

How do you expect the second function to be assigned to the onclick event? You're calling flippage exactly once, so it will assign exactly one of the two function to the event (namely increase). If you want to switch the event handlers, you need to call flippage again.

However, it makes much more sense to use a single event handler and let it decide if the element should be high or low:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test</title>
		<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
		<style>
			#box {
				width: 100px;
				height: 100px;
				position: absolute;
				bottom: 0;
				background-color: green;
			}
			#box.high {
				background-color: red;
				bottom: 100px;
			}
		</style>
		<script>
			$(function () {
				$('#box').click(function () {
					// If the box is high, make it low and vice versa
					$(this).toggleClass('high');
				});
			});
		</script>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>

You also confuse functions with function calls. If you want to bind the upward function to an event, you need to write “upward” without parentheses. Writing “upward()” means that you call this function.

Q695 · May 10, 2014

I'll be having it slide open, not pop open, and slide close, not pop close.

Jacques1 · May 10, 2014

So?

How the animation looks like is completely irrelevant. The point is that you use one event handler which takes care of the element.

Q695 · May 10, 2014

When you click the element once, it opens, when you click the element again it closes, also there is color shifting, and invisible to visible (tool tip styleing). What I'm having trouble with is simply clicking the 2nd function to close the slide out.

Jacques1 · May 10, 2014

There is no second function. That's what I'm trying to tell you the whole time. There is one event handler which takes care of the animation depending on the current state of the element.

The current state of the object can be stored in a variable or a data attribute or simply inferred from the style. If the element is closed, the event handler opens it. If it is open, the event handler closes it. There's absolutely no reason for constantly replacing the event handler with another function when you can simply use a single function.

Q695 · May 11, 2014

Lets revert to the days of flash for an explanation:

Remember how in flash you were able to go from frame 0 to frame 60 when you clicked on something, then it would stop. then you could go from frame 60 to frame 120 (a copy of frame 0) on another click, then you could click it again to go back to frame 60 another time? I'm having trouble mimicking something like that in JavaScript.

The short problem is I'm trying to make a JavaScript flash tweener tied to an onClick button.

Q695 · May 11, 2014

Got it:

use function A to call function B

use function B to call function A

Jacques1 · May 12, 2014

It's like talking to a wall.

Q695 · May 13, 2014

I'm a beginner for JavaScript, and intermediate for PHP

Sign In

baffeled on why only one javascript function is being called

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information