0

I am relatively new to javascript coding, been doing html\css only, so I wrote this function in JS, that hides and shows a div,but it doesn't seem to work at all, can you tell me what am I doing wrong?

Javascript:

<script type="text/javascript">

function click()
{

    if (document.getElementById("div1").style.opacity == "1")
    {
        document.getElementById("div1").style.height="0px";
        document.getElementById("div1").style.width="0%";
        document.getElementById("div1").style.opacity="0";
    }

    else
    {
        document.getElementById("div1").style.height="400px";
        document.getElementById("div1").style.width="60%";
        document.getElementById("div1").style.opacity="1";
    }


}

</script>

Below is the HTML code I'm working on:

<boutton onclick="click()">TEST CLICK</button>
<div id="div1">Random text in here...</div>

And also the STYLE tag:

<style>
#div1
{
    background-color: rgba(0, 0, 0, 0.4);
    color: #CBA303;
    font-weight: bold;
    text-align: center;
    border-radius: 20px;
    box-shadow: 10px 10px 15px gray;
    height: 0px;
    width: 0%;
    padding: 10px;
    font-size: 2em;
    font-family: sans-serif;
    z-index: 10;
    position: absolute;
    top: 20%;
    left: 20%;
    opacity: 0;
    transition: height,width,opacity 1s ease;
}
</style>

Thanks for your help!

Erik Russell
  • 793
  • 1
  • 9
  • 19
Yassir Khaldi
  • 1,452
  • 1
  • 17
  • 30
  • 2
    your button tag has a typo in the question. is it like that in your actual code? – Jesse Nov 02 '15 at 21:05
  • You should really read up on how to ask a proper question. Your title is likely to draw NO attention as it is very weak and doesn't even explain your problem. – Erik Russell Nov 02 '15 at 21:07
  • No the "button" is not like that in the actual html, sorry I misspelled it when I was writing the code in here. – Yassir Khaldi Nov 02 '15 at 21:11

1 Answers1

2

Rename your onclick function to something else besides click()

example here i've simply renamed it to toggle() and you can see it working.

Antonio Smoljan
  • 2,187
  • 1
  • 12
  • 11