ERROR onclick event in javascript

Question

I've been having a problem for a while now and I can't seem to understand how to fix it and I don't know what I'm doing wrong.

What I have to do is when I click on a link on the website it needs to pop up a calculator and then when I click the off button on that calculator it should disappear again. What am I doing wrong!?!? (Note: calcButton is a link and buttonOff is a button)

function showCalc()
{
    alert("button was clicked");
    document.getElementById('calculator').style.visibility = "visible";
}

function hideCalc()
{
    alert("off button was clicked");
    document.getElementById('calculator').style.visibility = "hidden";
}

function main() {
    //store top and left values of calculator
    calculator.style.top = getStyle(calculator, "top");
    calculator.style.left = getStyle(calculator, "left");

    document.getElementById('calcButton').onclick = showCalc;
    document.getElementById('buttonOff').onclick = hideCalc;

}

window.onload = main;

EDIT:

Here's the get style method:

function getStyle(object,styleName)
{
    if (window.getComputedStyle)
    {
        return document.defaultView.getComputedStyle(object, null).getPropertyValue(styleName);
    }
    else if (object.currentStyle)
    {
        return object.currentStyle[styleName];
    }
}

EDIT2:

Calc button (which is an href)

<a href="" id= "calcButton">Calculator</a>

Also I don't think some people understand what the problem is. The problem is when I click it the calculator turns visible and then back hidden almost instantaneously

I think you're setting up the onclick wrong. Should be: document.getElementById('calcButton').onclick = showCalc(); and document.getElementById('buttonOff').onclick = hideCalc(); — turnt
– turnt, Commented Feb 22, 2013 at 3:56
@Cygwinnian: no it's not. onclick should be a reference to a function, while showCalc() runs the function and has the value of the return value of the function. — Ryan Li
– Ryan Li, Commented Feb 22, 2013 at 3:59
Do you have any errors in your browser's JavaScript console? — Ryan Li
– Ryan Li, Commented Feb 22, 2013 at 4:01
This script looks fine, I think it has to do with getStyle function and also, cross check id's of controls. — Sunny
– Sunny, Commented Feb 22, 2013 at 4:03

Passerby · Accepted Answer · 2013-02-22 04:19:51Z

1

<a href="" id= "calcButton">Calculator</a>

This will cause the link to practically reload your page, so to you it seems the calculator appears and then "hides back immediately", because the page has been reloaded.

Add something to the href property:

<a href="javascript:void();" id= "calcButton">Calculator</a>

Live demo

answered Feb 22, 2013 at 4:19

Passerby

10.1k2 gold badges37 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mettalknight Over a year ago

Thank you so much for your help! You don't know how long I've been pulling my hair out for haha.

Collectives™ on Stack Overflow

ERROR onclick event in javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related