javascript 奇怪的“bug”？使用JS和CSS

所以我有我的网页与脚本和样式，代码：

<?php
session_start();
error_reporting(E_ALL);
ini_set('display_errors', 1);

$signed_in_user = "";
if (isset($_SESSION['signed_in_user'])) {
    $signed_in_user = $_SESSION['signed_in_user'];
}

if(isset($_POST['go-page'])) {
    header('Location: home.php');
    exit();
}

if(isset($_POST['go-change'])) {
    header('Location: profile.php');
    exit();
}

?>

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Settings</title>
    <link rel="stylesheet" type="text/css" href="style4.css">
    <style>
        <?php if (isset($_POST['theme']) && $_POST['theme'] === 'dark-theme'): ?>
            body {
                background-color: #333;
                color: #fff;
            }
            .signed-in-user {
                color: #fff;
            }
            <?php endif; ?>
            </style>
</head>
<body>
<div id="user-info">
    <?php if (!empty($signed_in_user)): ?>
        <p class="signed-in-user">Signed-in User: <?php echo $signed_in_user; ?></p>
        <?php endif; ?>
        <button id="theme-toggle">Toggle theme</button>
        </div>
        <div id="menu-left">
            <!-- <button type="button"></button> -->
            <button id="general" name="general">general</button>
            <button id="other" name="other">other</button>
            <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
                <button id="go-page" name="go-page">back to page</button>
            </form>
        </div>
        <div id="general-div">
            <p>show notifications <input type="range" class="slider" min="0" max="1" step="1" value="1" id="g1" name="g1"> <label for="g1" id="g1l">ON</label></p>
            
            <script type="text/javascript" src="https://www.termsfeed.com/public/cookie-consent/4.1.0/cookie-consent.js" charset="UTF-8"></script>
            <script type="text/javascript" charset="UTF-8">
                document.addEventListener('DOMContentLoaded', function () {
                cookieconsent.run({"notice_banner_type":"simple","consent_type":"express","palette":"dark","language":"en","page_load_consent_levels":["strictly-necessary"],"notice_banner_reject_button_hide":false,"preferences_center_close_button_hide":false,"page_refresh_confirmation_buttons":false,"website_privacy_policy_url":"https://example.com/privacy-policy"});
            });
            </script>
            <p><button href="#" id="open_preferences_center">Update cookies preferences</button></p>


            <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
                <button id="go-change" name="go-change">change account information</button>
            </form>
        </div>
        <script src="scriptsettings.js"></script>
</body>
</html>

js：

const themeToggleBtn = document.getElementById('theme-toggle');
const bodyElement = document.body;
const menu_left = document.getElementById('menu-left');
const general = document.getElementById('general');
const other = document.getElementById('other');
const general_div = document.getElementById('general-div');
const g1l = document.getElementById('g1l');
const g1 = document.getElementById('g1');
const page = document.getElementById('go-page');
const go_change = document.getElementById('go-change');
const cookies = document.getElementById('open_preferences_center');

g1.onchange = function() {
    g1l.innerHTML = g1.value;
    if(g1l.innerHTML == 1)
    {
        g1l.innerHTML = "ON";
        g1l.style.color = "lightgreen";
        g1.style.setProperty('--color', 'lightgreen');
        g1.style.backgroundColor = "#b1f0b1bb";
    }
    else
    {
        g1l.innerHTML = "OFF";
        g1l.style.color = "pink";
        g1.style.setProperty('--color', 'pink');
        g1.style.backgroundColor = "#f8e2e6bb";
    }
}

themeToggleBtn.addEventListener('click', function() {
    bodyElement.classList.toggle('dark-theme');
    
    themeToggleBtn.style.backgroundColor = bodyElement.classList.contains('dark-theme') ? '#fff' : '#333';
    themeToggleBtn.style.color = bodyElement.classList.contains('dark-theme') ? '#333' : '#fff';
    
    menu_left.style.backgroundColor = bodyElement.classList.contains('dark-theme') ? '#555' : '#fee';
    menu_left.style.color = bodyElement.classList.contains('dark-theme') ? '#fee' : '#555';
    
    general.style.backgroundColor = bodyElement.classList.contains('dark-theme') ? '#555' : '#fee';
    general.style.color = bodyElement.classList.contains('dark-theme') ? '#fee' : '#555';
    
    other.style.backgroundColor = bodyElement.classList.contains('dark-theme') ? '#555' : '#fee';
    other.style.color = bodyElement.classList.contains('dark-theme') ? '#fee' : '#555';

    general_div.style.backgroundColor = bodyElement.classList.contains('dark-theme') ? '#555' : '#fee';
    general_div.style.color = bodyElement.classList.contains('dark-theme') ? '#fee' : '#555';

    page.style.backgroundColor = bodyElement.classList.contains('dark-theme') ? '#555' : '#fee';
    page.style.color = bodyElement.classList.contains('dark-theme') ? '#fee' : '#555';

    go_change.style.backgroundColor = bodyElement.classList.contains('dark-theme') ? '#555' : '#fee';
    go_change.style.color = bodyElement.classList.contains('dark-theme') ? '#fee' : '#555';

    cookies.style.backgroundColor = bodyElement.classList.contains('dark-theme') ? '#555' : '#fee';
    cookies.style.color = bodyElement.classList.contains('dark-theme') ? '#fee' : '#555';

    // Save the theme preference as a cookie
    setCookie('theme', bodyElement.classList.contains('dark-theme') ? 'dark' : 'light', 365);
});

const savedTheme = getCookie('theme');
if (savedTheme === 'dark') {
    bodyElement.classList.add('dark-theme');
    
    themeToggleBtn.style.backgroundColor = '#fff';
    themeToggleBtn.style.color = '#333';
    
    menu_left.style.backgroundColor = '#555';
    menu_left.style.color = '#fee';

    general.style.backgroundColor = '#555';
    general.style.color = '#fee';

    other.style.backgroundColor = '#555';
    other.style.color = '#fee';

    general_div.style.backgroundColor = '#555';
    general_div.style.color = '#fee';

    page.style.backgroundColor = '#555';
    page.style.color = '#fee';

    go_change.style.backgroundColor = '#555';
    go_change.style.color = '#fee';

    cookies.style.backgroundColor = '#555';
    cookies.style.color = '#fee';
} else {
    bodyElement.classList.remove('dark-theme');
    
    themeToggleBtn.style.backgroundColor = '#333';
    themeToggleBtn.style.color = '#fff';
    
    menu_left.style.backgroundColor = '#fee';
    menu_left.style.color = '#555';

    general.style.backgroundColor = '#fee';
    general.style.color = '#555';

    other.style.backgroundColor = '#fee';
    other.style.color = '#555';

    general_div.style.backgroundColor = '#fee';
    general_div.style.color = '#555';

    page.style.backgroundColor = '#fee';
    page.style.color = '#555';

    go_change.style.backgroundColor = '#fee';
    go_change.style.color = '#555';

    cookies.style.backgroundColor = '#fee';
    cookies.style.color = '#555';
}

// Helper function to set a cookie
function setCookie(name, value, days) {
    const expires = new Date();
    expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
    document.cookie = name + '=' + value + ';expires=' + expires.toUTCString() + ';path=/';
}

// Helper function to get the value of a cookie
function getCookie(name) {
    const cookieArr = document.cookie.split(';');
    for (let i = 0; i < cookieArr.length; i++) {
        const cookiePair = cookieArr[i].split('=');
        if (name === cookiePair[0].trim()) {
            return decodeURIComponent(cookiePair[1]);
        }
    }
    return null;
}

但是样式和脚本不工作，在控制台中显示有问题，但在html中显示错误：scriptsettings.js：2未捕获语法错误：意外的标记“<”（在scriptsettings.js：2：1）
图片：

我的文件夹文件结构：

我检查了样式和脚本是否正确链接，它们是正确的。我不知道发生了什么事。

javascript 奇怪的“bug”？使用JS和CSS

1条答案

相关问题

热门标签

最新问答