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>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?
Share Improve this question edited Dec 17, 2018 at 13:21 thb 14.5k3 gold badges42 silver badges70 bronze badges asked Dec 17, 2018 at 13:00 Simon FSimon F 791 silver badge8 bronze badges 3- 1 sorry english is a second language to me and I am trying hard to master it... but still, thanks for your ments! ;) – Simon F Commented Dec 17, 2018 at 13:12
- I see. Trendy bad English by teenagers who can write good English, but won't, sometimes appears on this site. They write as though a Stackoverflow question were an SMS phone message to their immature friends. Such was not your intent. I will edit your post for standard English style. – thb Commented Dec 17, 2018 at 13:18
- 1 @thb Many thanks for your editing, making more people to understand and benefit from this post – Simon F Commented Dec 17, 2018 at 13:33
6 Answers
Reset to default 3When setting the display to block, add quotes around "block"
function open(){
x=document.getElementById("demo");
x.style.display="block";
}
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>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.
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>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";
}
open() and close() is reserved keyword. Please change the function name like openOne() and closeOne() and it's work.