CODEWITHSUNDEEP
javascripthtmlbuttonclick
Simon F
Simon F

Reputation: 79

Button onclick and everything disappears

I have been trying to write a code that simulates this example (code below). 

function closeMe(){

   		x=document.getElementById("demo");

   		x.style.display="none";

	}

function openMe(){

   		x=document.getElementById("demo");

   		 x.style.display="block";

	}
	<h1>Changing the Style</h1>
	<p>JavaScript can change the style of an HTML element.</p>

	<button type="button" onclick="openMe()">Open!</button>
	<button type="button" onclick="closeMe()">Close!</button>

	<p id="demo">Extra details...You can open and close this paragraph using the buttons above.</p>

Unfortunately, in my own code below, when I click the "open" button, all things just disappear. I can't figure out why.

function open() {
  x = document.getElementById("demo");
  x.style.display = "block";
}

function close() {
  x = document.getElementById("demo");
  x.style.display = "none";
}
<p id="demo">Click me to change my HTML content (innerHTML).</p>

<p> this shouldnt disappear</p>

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

<button onclick="close()">close button</button>

Can anyone give me some kind advice?

Upvotes: 2

Views: 3017

Answers (6)

Rahul
Rahul

Reputation: 41

open() and close() is reserved keyword. Please change the function name like openOne() and closeOne() and it's work.

Upvotes: 1

Nestor Renato Guerrero Arriola
Nestor Renato Guerrero Arriola

Reputation: 11

you need to use capital letters in functions and the styles must be between quotes;

try to have a clean code :)

function Open(){
        x = document.getElementById("demo");
        x.style.display = "block";
    }

        function Close(){
        x = document.getElementById("demo");
        x.style.display = "none";
    }

Upvotes: 1

Eponyme Web
Eponyme Web

Reputation: 976

Your function names are already being used. Keeping your code unchanged except for the function names you can test that is all works as expected.

  function open123(){
    let x=document.getElementById("demo");
    x.style.display="block";
  }

  function close123(){
    let x=document.getElementById("demo");
    x.style.display="none";
  }
<p id="demo">Click me to change my HTML content (innerHTML).</p>

<p> this shouldnt disappear</p>

<button onclick="open123()">open button</button>

<button onclick="close123()">close button</button>

Upvotes: 2

devedv
devedv

Reputation: 622

Open & close are reserved keywords. You are required to rename close & open method.

The open() method opens a new browser window.

The close() method to close the window.

Upvotes: 1

tmkiernan
tmkiernan

Reputation: 372

So these functions are all in the window scope, so i called window.function name. I also declared the variable in the function as it was throwing some javascript errors.

Now these aren't usually required but I have a feeling that jsfiddle uses "use strict"; which may force these sorts of distinctions. However I am open to other suggestions.

Hope this helps.

function open() { 
  var x = document.getElementById("demo");
  x.style.display = "block";
}

function close() {
  var x = document.getElementById("demo");
  x.style.display = "none";
}
<!DOCTYPE html>
<html>

<body>

  <p id="demo">Click me to change my HTML content (innerHTML).</p>

  <p> this shouldnt disappear</p>

  <button onclick="window.open();">open button</button>

  <button onclick="window.close();">close button</button>
</body>

</html>

Upvotes: 1

user8606937
user8606937

Reputation:

When setting the display to block, add quotes around "block"

function open(){
    x=document.getElementById("demo");
    x.style.display="block";
}

Upvotes: 3

Related Questions