CODEWITHSUNDEEP
javascripthtmlcss
T69
T69

Reputation: 47

HTML code disappears after running a simple js function

I'm trying to create a sidebar but when I run the js function for showing the sidebar, all the code disappeared. It disappeared from the inspector of the browser, not on visual studio. Here is my HTML code:

function open() {
  document.getElementById("sidebar").style.display = "block";
}
#titolo {
  text-align: center;
  font-size: 40px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  letter-spacing: 2px;
}

#bottone {
  position: absolute;
  top: 130px;
  right: 50px;
  background-color: skyblue;
  border: none;
  width: 100px;
  height: 50px;
  border-radius: 100px;
  font-size: 15px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: 500;
  font-style: italic;
}

#bottone:hover {
  background-color: cyan;
  cursor: pointer;
  transition: .3s;
}

#sidebar {
  background-color: #000;
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 250px;
  opacity: 0.8;
  display: none;
}

#title2 {
  color: white;
  font-family: 'Inter';
  text-align: center;
}

.link {
  color: whitesmoke;
  font-style: italic;
  font-family: 'Times New Roman', Times, serif;
  text-decoration: none;
  font-size: 30px;
}

#link1 {
  position: absolute;
  top: 155px;
  left: 85px;
}

#link2 {
  position: absolute;
  top: 225px;
  left: 85px;
}

#link3 {
  position: absolute;
  top: 305px;
  left: 85px;
}

#link4 {
  position: absolute;
  top: 380px;
  left: 85px;
}

#link5 {
  position: absolute;
  top: 455px;
  left: 85px;
}

#close {
  border-radius: 100px;
  width: 60px;
  height: 60px;
  border: none;
  position: absolute;
  left: 85px;
  bottom: 100px;
}

#close:hover {
  background-color: rgb(42, 35, 35);
  fill: white;
  transition: .3s;
}

.link:hover {
  text-decoration: underline;
}
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">

<script src="main.js"></script>
<h1 id="titolo">SIDEBAR</h1>
<button id="bottone" onclick="open()">cliccami!</button>
<div id="sidebar">
  <h2 id="title2">The sidebar</h2>
  <a href="#" id="link1" class="link">Link 1</a>
  <a href="#" id="link2" class="link">Link 2</a>
  <a href="#" id="link3" class="link">Link 3</a>
  <a href="#" id="link4" class="link">Link 4</a>
  <a href="#" id="link5" class="link">Link 5</a>
  <button id="close"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                <path d="M31.708 25.708c-0-0-0-0-0-0l-9.708-9.708 9.708-9.708c0-0 0-0 0-0 0.105-0.105 0.18-0.227 0.229-0.357 0.133-0.356 0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0-0 0-0 0l-9.708 9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.586c-0.286 0.286-0.361 0.702-0.229 1.057 0.049 0.13 0.124 0.252 0.229 0.357 0 0 0 0 0 0l9.708 9.708-9.708 9.708c-0 0-0 0-0 0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.355-0.057 0.771 0.229 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.13-0.049 0.252-0.124 0.357-0.229 0-0 0-0 0-0l9.708-9.708 9.708 9.708c0 0 0 0 0 0 0.105 0.105 0.227 0.18 0.357 0.229 0.356 0.133 0.771 0.057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z"></path>
                </svg></button>
</div>

Here is what i get before i click the button: what i get before i click the button

Here is what i get after i click the button: what i get after i click the button

Upvotes: 0

Views: 106

Answers (2)

James
James

Reputation: 631

You can't use open() as a variable because its a JavaScript Reserved Word. Try using other variable word like openSidebar()

function openSidebar() {
  document.getElementById("sidebar").style.display = "block";
}
#titolo {
  text-align: center;
  font-size: 40px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  letter-spacing: 2px;
}

#bottone {
  position: absolute;
  top: 130px;
  right: 50px;
  background-color: skyblue;
  border: none;
  width: 100px;
  height: 50px;
  border-radius: 100px;
  font-size: 15px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: 500;
  font-style: italic;
}

#bottone:hover {
  background-color: cyan;
  cursor: pointer;
  transition: .3s;
}

#sidebar {
  background-color: #000;
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 250px;
  opacity: 0.8;
  display: none;
}

#title2 {
  color: white;
  font-family: 'Inter';
  text-align: center;
}

.link {
  color: whitesmoke;
  font-style: italic;
  font-family: 'Times New Roman', Times, serif;
  text-decoration: none;
  font-size: 30px;
}

#link1 {
  position: absolute;
  top: 155px;
  left: 85px;
}

#link2 {
  position: absolute;
  top: 225px;
  left: 85px;
}

#link3 {
  position: absolute;
  top: 305px;
  left: 85px;
}

#link4 {
  position: absolute;
  top: 380px;
  left: 85px;
}

#link5 {
  position: absolute;
  top: 455px;
  left: 85px;
}

#close {
  border-radius: 100px;
  width: 60px;
  height: 60px;
  border: none;
  position: absolute;
  left: 85px;
  bottom: 100px;
}

#close:hover {
  background-color: rgb(42, 35, 35);
  fill: white;
  transition: .3s;
}

.link:hover {
  text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <script src="main.js"></script>
  <h1 id="titolo">SIDEBAR</h1>
  <button id="bottone" onclick="openSidebar()">cliccami!</button>
  <div id="sidebar">
    <h2 id="title2">The sidebar</h2>
    <a href="#" id="link1" class="link">Link 1</a>
    <a href="#" id="link2" class="link">Link 2</a>
    <a href="#" id="link3" class="link">Link 3</a>
    <a href="#" id="link4" class="link">Link 4</a>
    <a href="#" id="link5" class="link">Link 5</a>
    <button id="close"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
            <path d="M31.708 25.708c-0-0-0-0-0-0l-9.708-9.708 9.708-9.708c0-0 0-0 0-0 0.105-0.105 0.18-0.227 0.229-0.357 0.133-0.356 0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0-0 0-0 0l-9.708 9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.586c-0.286 0.286-0.361 0.702-0.229 1.057 0.049 0.13 0.124 0.252 0.229 0.357 0 0 0 0 0 0l9.708 9.708-9.708 9.708c-0 0-0 0-0 0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.355-0.057 0.771 0.229 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.13-0.049 0.252-0.124 0.357-0.229 0-0 0-0 0-0l9.708-9.708 9.708 9.708c0 0 0 0 0 0 0.105 0.105 0.227 0.18 0.357 0.229 0.356 0.133 0.771 0.057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z"></path>
            </svg></button>
  </div>
</body>

</html>

Upvotes: 0

Dani3le_
Dani3le_

Reputation: 1487

You can't call your JS function as open(). Try renaming it something else, for example apriSidebar().

Upvotes: 2

Related Questions