JS onclick to show separate div not working

Question

Before you mark this duplicate again, you should know that I have been struggling with this for hours. I have tried just about every method I can find on this site (including the one it is a "duplicate" of), but nothing is working.

I have a button (#form-toggle) that I want to add display: block; to a hidden div at the bottom of the page.

I see this error in Chrome's console: Uncaught TypeError: Cannot read property 'click' of null but have no idea what it means.

This is a simplified version of the elements I want to interact with each other:

HTML

<a id="form-toggle" href="#form-row">Click Me</a>

[web page]

<div id="form-row">
    <div class="[several other classes] marketo-form"></div>
</div>

JS

$(document).ready(function(){
    var button = document.getElementById('form-toggle');

    button.onclick = function() {
        var div = document.getElementsByClassName('marketo-form');
        if (div.style.display !== 'none') {
            div.style.display = 'none';
        }
        else {
        div.style.display = 'block';
    }
};

});

This is just one of about 10 different scripts I've found on here and tried. I am a front end guy [designer], I have no idea what I'm doing with this stuff. There is a second button at the bottom of the page, which works fine to accomplish this. I didn't write the script, so I don't know how to edit it. It's below, if that might help troubleshooting.

HTML

<div id="form-row">
    <div class="get-in-touch-2 mkto1866mkto" >
        <a href="#">Schedule a Demo</a>
    </div>
    <div class="marketo-form">
        <form id="mktoForm_1866"></form>
    </div>
</div>

JS

$('.get-in-touch-2').on('click', function(event){
    event.preventDefault();
        if ($(this).is('.copy-button')) {
        var butClass = $(this).attr('class');
        var mktoFormId = butClass.split("mkto");
        mktoFormId = mktoFormId[1];
        $('#mktoForm_' + mktoFormId).appendTo($(this).parent().find('.marketo-form'));
    }
    $('.get-in-touch-2').not(this).parent().find('.marketo-form').slideUp();
    $('.marketo-comp-block').find('.marketo-form').slideUp();
    $(this).parent().find('.marketo-form').slideToggle();
    checkWidth();
});

Also: https://stackoverflow.com/questions/28387375/javascript-cant-get-getelementsbyclassname-working and https://stackoverflow.com/questions/33770573/getelementsbyclassname-doesnt-work, among others. — isherwood, Feb 08 '19 at 14:42
@isherwood this isn't a problem with getElementsByClassName not working. I have tried numerous variants of the script, as I mentioned in my post. This just happens to be the current script I am working with. Your "duplicate" posts are not solutions — Manly, Feb 08 '19 at 14:45
It's not clear which problem you're trying to solve (or, as a "front end guy", why JavaScript is apparently so foreign to you). I'd love to help, but you need to narrow scope a bit. Your confusion over the null error is... confusing. It just means that the element doesn't exist as selected. I'd create a fiddle to look into it, but I'm not sure which of your code to use. If you'd like to do so, post it here in a comment and I'll vote to reopen. — isherwood, Feb 08 '19 at 14:47
@isherwood I tried to create a fiddle initially, but the page this is on is already built out and there are so many factors at play. I can't even get the things that work on the live page to work in the fiddle. I'm about ready just to say f--k it with this haha I'm only doing it to try and save the user one extra click — Manly, Feb 08 '19 at 15:03
See if you can create a simplified demo. You'll get lots of help if you can do that. — isherwood, Feb 08 '19 at 15:06
@isherwood that's where I'm getting confused. In the [simplified fiddle](https://jsfiddle.net/u65a8dsx/2/), things seem to work just fine. On the page, they don't. — Manly, Feb 08 '19 at 15:17

score 1 · Answer 1 · answered Feb 08 '19 at 14:37

The issue is because getElementsByClassName() returns an array. As such you need to access it by index. If there is only one .marketo-form element you just need to add [0] to the call in order to retrieve the first element

var div = document.getElementsByClassName('marketo-form')[0];

$(document).ready(function() {
  var button = document.getElementById('form-toggle');

  button.onclick = function() {
    var div = document.getElementsByClassName('marketo-form')[0];
    div.style.display = div.style.display == 'none' ? 'block' : 'none';
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="form-toggle" href="#form-row">Click Me</a> [web page]

<div id="form-row" class="[several other classes] marketo-form">[form stuff]</div>

Here's an alternative version using jQuery as you've included it anyway:

$(document).ready(function() {
  $('#form-toggle').click(function() {
    $('.marketo-form').toggle();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="form-toggle" href="#form-row">Click Me</a> [web page]

<div id="form-row" class="[several other classes] marketo-form">[form stuff]</div>

Neither of those worked. I have tried that jQuery one, and numerous variants of it, but nothing is working here — Manly, Feb 08 '19 at 14:41
In which case you need to check the console for errors as you can see from the examples, based on what you've shown in the question, these work fine — Rory McCrossan, Feb 08 '19 at 14:42
That means that whatever `$` is a reference to in your JS code, it's not jQuery — Rory McCrossan, Feb 08 '19 at 14:48

JS onclick to show separate div not working

1 Answers1