Problem viewing a div with a simple function

Question

I have a problem I would say stupid with html and javascript, a simple function that should make me visible and invisible a div crashes the html making it empty!

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

js:

var x = document.getElementById ("joseph");
   if (x.hidden == false) {
     x.hidden = true;
   } else {
     x.hidden = false;
}

before:

after:

Where's the element with the ID of `joseph`? Why do you have a space in `getElementById ("joseph");`? — j08691, Aug 09 '21 at 21:40

score 2 · Accepted Answer · answered Aug 09 '21 at 21:57

2

You don't have to write pre-defined methods. It works same for all other tech stacks such as Mysql, PHP, etc.

Recommend using opens, not open if you insist to use the open word.

<button onclick="opens()">Modifica</button>

answered Aug 09 '21 at 21:57

seagulls0125

139
8

score 1 · Answer 2 · answered Aug 09 '21 at 21:44

You've hit a variation of this problem.

When searching for a variable named open the browser finds document.open before it finds your open function.

document.open opens a new document for writing (with document.write) which erases the existing document.

window.open is also predefined, so making a new global function with that name is not advised.

As with the linked question: Use addEventListener instead of onclick attributes.

Problem viewing a div with a simple function

2 Answers2