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!

jerseyetr
  • 725
  • 1
  • 8
  • 18
Yassir Khaldi
  • 1,002
  • 1
  • 12
  • 22
  • 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. – jerseyetr 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,157
  • 1
  • 11
  • 11