Javascript - on-click function giving unexpected result

Question

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.

since you're using a pseudo selector, I'll suggest to follow the recommendation on the response on this question: https://stackoverflow.com/a/12207551/291833 — Santiago Rojo, Jan 10 '20 at 18:32

t.niese · Answer 1 · 2020-01-10T18:35:58.230

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");

take a look at the documentation of `Document.getElementsByClassName` you've linked it. It does support more than one class as the selector, each of which should be separated by a whitespace — Santiago Rojo, Jan 10 '20 at 18:15
@t.niese Hello. Please check my original post, as I want to add that class to the query selector. I have tried 1 method, however It does not work. Any suggestions? — NodeReact020, Jan 10 '20 at 18:20
[`:after`](https://developer.mozilla.org/en-US/docs/Web/CSS/::after) creates a [pseudo element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements), those elements are not part of the DOM and cannot be selected. So you don't want to display the box but that element. — t.niese, Jan 10 '20 at 18:32

symlink · Answer 2 · 2020-01-10T18:35:37.293

0

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>

edited Jan 10 '20 at 18:35

answered Jan 10 '20 at 18:10

symlink

11,984
7
29
50

Hello. Please check my original post, as I want to add that class to the be displayed as-well. I have tried 1 method, following your patter, however It does not work. Any suggestions? – NodeReact020 Jan 10 '20 at 18:21
@eweee see my edit, is that what you're looking for? – symlink Jan 10 '20 at 18:35

Javascript - on-click function giving unexpected result

2 Answers2