Problem calling JavaScript function from div onclick

Question

I don't know JavaScript yet but I am trying to run a JavaScript function when I click a div. The function will show another div with the class rightside. I have tried hrefs inside divs, divs inside hrefs and divs alone with onclick. When I insert a href to another page it works, I just can't seem to run the JS. I've read various posts and to my eye I am doing exactly what others seem to have succeeded doing.

In the body:

<div class="level3 nam col10" id="box10" onclick="loadLeftBar()"><p></p></div>

In the head (for now until I can get this to work and put in a separate .js file):

<script>function loadLeftBar() {
        var x = document.getElementsByClassName("rightside");
        if (x.style.display === "none") {
          x.style.display = "block";
        } else {
          x.style.display = "none";
        }
}</script>

CSS for the DIV I'm trying to show on click:

.rightside {
    display: none;
    width: 35%;
    height: 39vw;
    position: absolute;
    top: 2.3vw;
    right: 2.3vw;
    z-index: 3;
    background-color: lawngreen;
    border: solid black;
    overflow-x: hidden;
    overflow-y: scroll;
}

P.S. When I manually change display to block in the CSS the **rightside** div appears as desired. — TameAim, May 09 '20 at 11:23
There are two problems in your script: 1. [What do querySelectorAll and getElementsBy* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return), 2. the `style` attribute is initialized with the content of the `style` attribute in the markup. No attribute, no content. — Andreas, May 09 '20 at 11:28

score 1 · Answer 1 · answered May 09 '20 at 11:34

getElementsByClassName returns an array. Change your selector to var x = document.getElementsByClassName("rightside")[0]; and it should work.

function loadLeftBar() {
  var x = document.getElementsByClassName("rightside")[0];
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

<div class="level3 nam col10" id="box10" ><a href="#" onclick="loadLeftBar()">click me</a></div>

<div class="rightside" style="display: none;">
rightside
</div>

I also added style="display: none" to rightside as the JavaScript is testing for that inline property. I also changed the element with the click handler to a <a> - elements with events should be buttons or anchors.

@goto1's answer is probably better though as it avoids inline styling.

goto · Answer 2 · 2020-05-09T17:34:07.153

0

One of the issues you're having is that document.getElementsByClassName returns an "array-like object of all child elements which have all of the given class name(s)". So you have to select the first element, if that's what you want, or assign an ID to whatever element you're trying to select and use document.getElementById.

<div id="rightside" style="border: 1px solid red;">
  <p>I am a rightside!</p>
</div>
<script>
  var x = document.getElementById("rightside");
</script>

Also, I suggest you add or remove styling classes if you want to hide or show something instead of using inline styles. Create an x--active class and remove/add it as needed.

Here's an example:

function loadLeftBar() {
  var rightSideElements = document.getElementsByClassName("rightside");
  var x = rightSideElements[0];

  x.classList.toggle("rightside--active");
}

#box10 {
  border: 1px solid black;
}

.rightside {
  display: none;
  width: 35%;
  height: 39vw;
  position: absolute;
  top: 2.3vw;
  right: 2.3vw;
  z-index: 3;
  background-color: lawngreen;
  border: solid black;
  overflow-x: hidden;
  overflow-y: scroll;
}
.rightside--active {
  display: block;
}

<div
  id="box10"
  class="level3 nam col10"
  onclick="loadLeftBar()"
>
  <p>Click me!</p>
</div>
<div class="rightside">
  <p>I am a rightside!</p>
</div>

edited May 09 '20 at 17:34

answered May 09 '20 at 11:34

goto

4,336
15
20

Thanks for the replies everyone. I've tried to implement gogo1's fix and all the HTML CSS comments and the ID/Class comments all make sense, but my div is still not clickable. Sorry about this. `` – TameAim May 09 '20 at 12:08
@TameAim given what you're described and provided us to work with, the code snippet above works (run it by clicking "Run code snippet" button). You're issue must be somewhere else or your `loadLeftBar` function is not getting called at all - that'd be the first thing to check. – goto May 09 '20 at 12:22
Thanks for your help goto. I switched out the script for a simple error message onclick just to test and that worked. I must be doing something wrong with the JS but its beyond me I think. – TameAim May 09 '20 at 12:44
@TameAim have you tried exactly just what I am doing? – goto May 09 '20 at 12:48
I think so. This is with IDs but I did classes as per your example too. https://jsbin.com/gabaxunuco/edit?html,css,output – TameAim May 09 '20 at 12:57
@TameAim here's a fix - https://codesandbox.io/s/optimistic-taussig-uwc3p?fontsize=14&hidenavigation=1&theme=dark. You need to do `.rightside--active` in your `CSS` instead of `#rightside--active` since you're adding/removing classes, not `ID`s – goto May 09 '20 at 13:19
Thank you. I've been staring at it so long I've become blind to the obvious. That's working great. Thanks again. – TameAim May 09 '20 at 13:32

Problem calling JavaScript function from div onclick

2 Answers2