使用 Flex 类无法点击 HTML 按钮？

Question

我对 html 还很陌生。 我无法使用 onclick 按钮。 当我将此 Flex 添加到 mt 提交按钮时，它变得不可点击（即 onclick 不会触发）

CSS

/*--contct button--*/
.contact-form .single-contact-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    height:50px;
    text-transform:capitalize;
    margin-top: 3px;
    background: #b636ff;
    border: 1px solid #b636ff;
    box-shadow: 0 5px 20px rgba(0,0,0,.2);
     -webkit-transition: .5s; 
    -moz-transition:.5s; 
    -ms-transition:.5s; 
    -o-transition:.5s;
    transition: .5s;
}
.contact-form .single-contact-btn .contact-btn ,
.contact-form .single-contact-btn .contact-btn:focus {
    margin-top:0px;
    outline: 0 !important;
    border:0;
    color: #fff;
    border-radius: 0px;
    font-size:14px;
    -webkit-transition: .5s; 
    -moz-transition:.5s; 
    -ms-transition:.5s; 
    -o-transition:.5s;
    transition: .5s;
    
}
.single-contact-btn:hover{
    background: #9f00ff;
    border: 1px solid #9f00ff;
    box-shadow: 0 5px 20px rgba(0,0,0,.2);
}

HTML

<div class="col-sm-12">
                                            <div class="single-contact-btn">
                                                <button class="contact-btn" id="submitbutton"
                                                    type="button">submit</button>
                                            </div>
                                        </div>

但是如果我删除“single-contact-btn”类，按钮 onclick 就会开始工作

<div class="col-sm-12">
                                            <div>
                                                <button class="contact-btn" id="submitbutton"
                                                    type="button">submit</button>
                                            </div>
                                        </div>

js

window.onload = function () {
            console.log('loaded');
            console.log(document.getElementById("submitbutton"));
            document.getElementById("submitbutton").addEventListener('click', function () {
                console.log('clicked');
            })
        }

弄乱按钮的“single-contact-btn”类有什么问题吗？

Answer 1

您已使用

getElementById("submitbutton")

将事件添加到元素。这意味着当您单击该特定元素的区域时，将执行关联的事件。如果您想对具有“single-contact-btn”类的所有元素执行事件，您可以使用 getElementsByClassName() 方法。要定位该类中的特定元素，您可以向该元素添加唯一 ID，然后使用 getElementById()。

这是一个例子：

<div class="col-sm-12">
  <div class="single-contact-btn" id="submitbutton">
    <button class="contact-btn" type="button">submit</button>
  </div>
</div>