JS - Set visibility of a div to hidden via a button

Question

function button1() {
    document.getElementById("id1").style.visibility = "hidden";
}

.d1 {
    font-family: "Aldrich";
    font-size: 50px;
}

<link href="https://fonts.googleapis.com/css?family=Aldrich" rel="stylesheet">

<div class="d1" id ="id1">Test</div>

<button onclick="button1">Button 1</button>

I use the above simple code to set the visibility of a div to hidden via a button. I click on it but nothing happens. If I set the property visibility: hidden; directly to d1 it does work though...

You just forgot the parentheses: **onclick="button1"** becomes **onclick="button1()"** — Cem Firat, May 13 '20 at 05:53

score 3 · Accepted Answer · answered May 13 '20 at 05:13

Here you go with a solution

function button1() {
  document.getElementById("id1").style.visibility = "hidden";
}

.d1 {
    font-family: "Aldrich";
    font-size: 50px;
}

<div class="d1" id ="id1">Test</div>

<button onclick="button1()">Button 1</button>

You forgot to call the method from button click. For calling a method button1()

score 2 · Answer 2 · answered May 13 '20 at 05:17

missing the button1() on your html <button>

function button1() {
    document.getElementById("id1").style.visibility = "hidden";
}

.d1 {
    font-family: "Aldrich";
    font-size: 50px;
}

<div class="d1" id ="id1">Test</div>

<button onclick="button1()">Button 1</button>

JS - Set visibility of a div to hidden via a button

2 Answers2