时间戳

首页 > 解决方案 > HTML onclick 功能不适用于按钮

javascript - HTML onclick 功能不适用于按钮

问题描述

所以我正在制作一个网站，我有一些按钮可以滚动到页面的某些部分。我有 5 个按钮，除了名称之外，它们都有完全相同的代码。其中一个按钮坏了，没有做任何事情，即使它的代码与工作按钮相同。

这是我的 HTML：

关于我们 
    <div class = "OurMethodsBar">
        <button class = "OurMethodsButton" onclick = "ScrollTo(OurMethodsAnchor)">
            Our Methods
        </button>
    </div>
    <div class = "InvestBar">
        <button class = "InvestButton" onclick = "ScrollTo(InvestAnchor)">
                Invest
        </button>
    </div>
    <div class = "ContactUsBar">
        <button class = "ContactUsButton" onlclick = "ScrollTo(ContactUsAnchor)">
            Contact Us
        </button>
    </div>
    <div class = "MoreInformationBar">
        <button class = "MoreInformationButton" onclick = "ScrollTo(MoreInfoAnchor)">
            More Info
        </button>
    </div>

这是我的 JS：

var AboutUsAnchor = document.getElementById("AboutUsAnchor");

var OurMethodsAnchor = document.getElementById("OurMethodsAnchor");
var InvestAnchor = document.getElementById("InvestAnchor");
var ContactUsAnchor = document.getElementById("ContactUsAnchor");
var MoreInfoAnchor = document.getElementById("MoreInfoAnchor");

function ScrollTo(Element) {
    Element.scrollIntoView(true);
}

ScrollTo(AboutUsAnchor);

损坏的按钮是 ContactUsButton，它应该滚动到 ContactUsAnchor。如果我手动使用 ScrollTo 函数并输入 ContactUsAnchor，它仍然可以工作，但是当我尝试按下按钮时，它就不起作用了。

标签： javascripthtmlcssbutton

解决方案

我宁愿改变方法并重写您的函数以获取字符串并稍后通过 ID 获取元素。

function ScrollTo(element) {
    document.getElementById(element).scrollIntoView(true);
}

然后在您的按钮中，只需传递包含单引号 ID 的字符串'

    <button class = "ContactUsButton" onclick = "ScrollTo('ContactUsAnchor')">
        Contact Us
    </button>

正如其他人指出的那样，解决这个问题onlclick：P

推荐阅读