时间戳

首页 > 解决方案 > element.onclick 在点击时没有反应

javascript - element.onclick 在点击时没有反应

问题描述

单击某个图标时，我试图显示/隐藏选项，但它似乎不起作用。我已经验证了链接，并通过警报对其进行了测试。这是我的 HTML：

<!DOCTYPE html>
主页 
        <main>
            <table class='menu'>
                <thead>
                    <tr scope='col'>
                        <th id='menu-icon'>
                            <img src='./images/menu.png'  &#9776;>
                        </th>
                        <th rowspan="2" id='hide-insta'>
                            #LoveLan<img id="insta" src='./images/instagram.png'>
                            <p>en <img src="arrow-down.png"></p>
                        </th>
                        <th id='show-profile'>
                            <div><img src='./images/Profile.png'>My profile</div>
                            <div><img src="images/info-circle.png">Info & Faqs</div>
                        </th>
                    </tr>
                </thead>
                <tbody class='white-squares'>
                    <tr>
                        <td id='yellow'>WHAT'S ON IN LONDON</td>
                        <td id='blue'>YOUR LONDON CALENDAR</td>
                    </tr>
                    <tr>
                        <td id='blue'>SERVICES</td>
                        <td id='yellow'>OFFERS</td>
                    </tr>
                </tbody>
            </table>
        </main>
        <script type="text/javascript" src="main.js"></script>
    </body>

在 CSS 上我有 - 这是否会影响 js 文件并使显示始终为“show-profile”隐藏？：

#show-profile {
    color: #d0a955;
    font-size: 23px;
    font-family: 'Gill Sans';
    display: none;
}

最后，我的js文件：

const toHide = document.getElementById('hide-insta');
const menuIcon = document.getElementById('menu-icon');
const profileAndFaqs = document.getElementById('show-profile');
const displaySetting = toHide.style.display;

let displayProfile = () => {
    toHide.style.display = 'none';
    profileAndFaqs.style.display = 'inline-block';
}

let reset = () => {
    toHide.style.display = 'inline';
    profileAndFaqs.style.display = 'none';
}

let toggleInsta = () => {
    if(displaySetting === none) {
        reset()
    } else {
        displayProfile()
    }
}

menuIcon.onclick(toggleInsta);

标签： javascriptonclickdom-events

解决方案

推荐阅读