CODEWITHSUNDEEP
javascripthtmlcss
user9228388
user9228388

Reputation:

Unable to display div by clicking button

<!doctype html>
<html>
<head>
    <style>
        div.abc {
            width: 500px;
            height: 50px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
    <button onclick="ok()">  Helloo </button>
    <div class="abc">
        Your Name <input type="text">
        Your Name <input type="text">
    </div>
    <script>
            function ok(){
               document.getElementsByClassName("abc").style.display="block";
            }
    </script>
</body>
</html>

// In above line of code initially I have hidden the div with class name abc,but on clicking the button I want to show that div but onclicking the button desired div is not coming.

Upvotes: 0

Views: 90

Answers (8)

user8075599
user8075599

Reputation:

document.getElementsByClassName("abc").style.display="block";

TO

document.getElementsByClassName("abc")[0].style.display="block";

Upvotes: 1

Pravin Vavadiya
Pravin Vavadiya

Reputation: 3207

I think You need to use ID in your div because of in page multiple class are present but ID use only once.

See here

<!doctype html>
<html>
<head>
    <style>
        div#abc {
            width: 500px;
            height: 50px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
    <button onclick="ok()">  Helloo </button>
    <div id="abc">
        Your Name <input type="text">
        Your Name <input type="text">
    </div>
    <script>
            function ok(){
               var x = document.getElementById("abc");
               x.style.display="block";                        
            }
    </script>
</body>
</html>

Upvotes: 0

SSD
SSD

Reputation: 1391

If your project has jquery referenced then you can also use its functions show(), hide()

Example

$(document).ready(function(){
$("button").click(function(){
    $(".abc").hide(1000);
});
});

show(), hide() functions take an optional parameter to animate show or hide of div (like 1000 in my example)

Upvotes: 0

jasinth premkumar
jasinth premkumar

Reputation: 1413

getelementbyclassname would always select every elements with provided class name because conceptually Classes are meant to be applied to multiple elements. so to select first element use [0] like this getelementbyclassname[0]

<!doctype html>
<html>
<head>
    <style>
        div.abc {
            width: 500px;
            height: 50px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
    <button onclick="ok()">  Helloo </button>
    <div class="abc">
        Your Name <input type="text">
        Your Name <input type="text">
    </div><br>
   
    <script>
            function ok(){
               document.getElementsByClassName("abc")[0].style.display="block";
            }
    </script>
</body>
</html>

Upvotes: 0

Ayo K
Ayo K

Reputation: 1774

document.getElementsByClassName("abc")

returns an array. So you need to access it like one as:

document.getElementsByClassName("abc")[0]

Edited snippet:

<!doctype html>
<html>
<head>
    <style>
        div.abc {
            width: 500px;
            height: 50px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
    <button onclick="ok()">  Helloo </button>
    <div class="abc">
        Your Name <input type="text">
        Your Name <input type="text">
    </div>
    <script>
            function ok(){
               document.getElementsByClassName("abc")[0].style.display="block";
            }
    </script>
</body>
</html>

Upvotes: 1

Đạt M&#232;o
Đạt M&#232;o

Reputation: 13

document.getElementsByClassName("abc") will return a HTMLCollection array, and therefor it does not have style property.

you can use document.querySelector(".abc") instead.

It will run on almost all browser nowadays

Upvotes: 1

user1438038
user1438038

Reputation: 6059

The function getElementsByClassName() returns an array of elements. To access you element, you have to either iterate over all elements that are returned by the function, or you can access individual items by specifying the desired id:

function ok() {
   document.getElementsByClassName('abc')[0].style.display = 'block';
}

Upvotes: 1

Titus
Titus

Reputation: 22474

document.getElementsByClassName returns multiple elements not just one. You'll have to use something like this:

document.getElementsByClassName("abc")[0].style.display="block";

This statement will only affect the first element with class abc because of the [0], if you have multiple elements with that class and you want to show them all, you'll have to iterate through the results of document.getElementsByClassName("abc") and modify each element.

Upvotes: 3

Related Questions