Question

在再次标记此重复项之前，您应该知道我已经在小时内为此苦苦挣扎。我已经尝试了在该站点上可以找到的几乎所有方法（包括一种“重复的”方法），但是没有任何效果。

我有一个按钮（#form-toggle），我想将display: block;添加到页面底部的隐藏div中。

我在Chrome的控制台中看到此错误：Uncaught TypeError: Cannot read property 'click' of null，但不知道这是什么意思。

这是我要彼此交互的元素的简化版本：

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';
    }
};

}）;

这只是我在这里找到并尝试的大约10种不同脚本中的一种。我是一名前端人员[设计师]，我不知道我在用这些东西做什么。页面底部还有第二个按钮，可以很好地完成此操作。我没有编写脚本，所以我不知道如何编辑它。如果可以帮助解决问题，则在下面。

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();
});

Answer 1

问题是因为getElementsByClassName()返回一个数组。因此，您需要按索引访问它。如果只有一个.marketo-form元素，则只需在调用中添加[0]即可检索第一个元素

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>

这是使用jQuery的替代版本，无论如何您都将其包括在内：

$(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>

JS onclick显示单独的div不起作用

1 个答案: