CODEWITHSUNDEEP
javascript
NodeReact020
NodeReact020

Reputation: 506

Javascript - on-click function giving unexpected result

In my project, I have a div, which is set to display: none; by default. When a user clicks an image, I use the onclick function to attempt to display the image. However this method does not work for some reason.

Here is my HTML:

<img onclick="hamburgerFunc()" class="hamburger-btn" width="38px" src="{% static 'hamburgericon.png' %}" alt="Image of hamburger icon"> 

<div class="box arrow-top"></div>
<script src="{% static 'home.js' %}"></script>

JS:

function hamburgerFunc(objs) {
    objs = document.getElementsByClassName("box arrow-top")
    objs.style.display = 'inline-block';
}

UPDATED CODE:

.box.arrow-top:after {
    content: " ";
    position: absolute;
    right: 30px;
    top: -15px;
    border-top: none;
    display: none;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-bottom: 15px solid white;
  }

The box arrow-top is the div I want to display once the image is pressed. Does anybody know why this code is not working? Thank you.

Upvotes: 0

Views: 54

Answers (2)

t.niese
t.niese

Reputation: 40852

getElementsByClassName returns not a single element but an a live HTMLCollection. And you either need to iterate over all of them and set the style for each of them individually. Or if you only expect on the element you would directly access it objs[0].style.display = …

const objs = document.getElementsByClassName("box arrow-top")
objs[0].style.display = 'inline-block';

or 

const objs = document.getElementsByClassName("box arrow-top")
for (const obj of objs) {
  obj.style.display = 'inline-block';
}

Alternatively you can use querySelector or querySelectorAll

const obj = document.querySelector(".box.arrow-top")
obj.style.display = 'inline-block';

or if you really have multiple elements:

const objs = document.querySelectorAll(".box.arrow-top")
for (const obj of objs) {
  obj.style.display = 'inline-block';
}

UPDATE

:after creates a pseudo element, those elements are not part of the DOM and cannot be selected.

What you want to do is to remove the display: none; from your css rule. And e.g. change the rule to .box.arrow-top.visible:after 

.box.arrow-top.visible:after {
    content: " ";
    position: absolute;
    right: 30px;
    top: -15px;
    border-top: none;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-bottom: 15px solid white;
  }

And then do:

obj.style.classList.add("visible");

Upvotes: 3

symlink
symlink

Reputation: 12209

function hamburgerFunc() {
    document.querySelector(".box.arrow-top").style.display = 'inline-block'
}
.box.arrow-top{
    display:none;
    background:orange;
    padding:1em;
    position:relative;
    width: 38px;
}

.box.arrow-top:after {
    content: " ";
    position: absolute;
    border-top: none;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-bottom: 15px solid white;
  }
<img onclick="hamburgerFunc()" class="hamburger-btn" width="38px" src="https://placekitten.com/200/200" alt="Image of hamburger icon"> 

<div class="box arrow-top"></div>

Upvotes: 0

Related Questions