CODEWITHSUNDEEP
javascripthtml
Mick
Mick

Reputation: 123

Open and close a dialog element via Javascript functions

I have a problem to open/close a <div> dialog. My code looks like this: 

<html>
<head>
<title>Wochenplaner</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="dialog" style="display: none;">
    <p id="demo">test</p>
    <button onclick="close()">Close</button>
</div>


<button onclick="open()">Click me</button>

<script>
    var test = document.getElementById("dialog");
    function dialog() {
        if (test.style.display !== "none") {
            test.style.display = "none";
        } else {
            test.style.display = '';
        }
    }
    function open() {
        test.style.display = '';
    }
    function close() {
        test.style.display = "none";
    }
</script>

</body>
</html>

When I click on "Click me", the button disappears and nothing else happens. If I use the dialog()-Function instead of open() and close() it works as intended, the <div> appears with a click on the button "Click me" and disappears with a click on "Close" or "Click me". My Question is: Why does it work when I use dialog(), but not with open() and close()?

Upvotes: 0

Views: 909

Answers (1)

ED-209
ED-209

Reputation: 4746

The problem is the name of your function open(). Change it, and it will work :)

Open is a reserved word in JavaScript

Upvotes: 6

Related Questions