黑暗模式在JavaScript中更改两个图片

a11xaf1n  于 12个月前  发布在  Java
关注(0)|答案(1)|浏览(74)

我正面临着这个问题,我有两张图片,但只有其中一个是改变点击到倒置的版本.有一些问题,在代码中,或?

<script>
    const toggleButton = document.getElementById('toggle-button');
    const body = document.body;

    // Function to toggle between dark and light mode
    function toggleDarkMode() {
        body.classList.toggle('dark-mode');
        // Save the user's preference to localStorage
        var imgElement = document.getElementById("image");
        var imgElement = document.getElementById("svg");
        if (body.classList.contains('dark-mode')) {
            localStorage.setItem('darkMode', 'enabled');
            toggleButton.textContent = 'Light';
            imgElement.src = "task2invert.png";
            imgElement.src = "logoinvert.svg";

        } else {
            localStorage.setItem('darkMode', 'disabled');
            toggleButton.textContent = 'Dark';
            imgElement.src = "task2.png";
            imgElement.src = "logo.svg";
        }
    }

    // Check localStorage for the user's preference and set the initial mode
    if (localStorage.getItem('darkMode') === 'enabled') {
        body.classList.add('dark-mode');
        toggleButton.textContent = 'Light';
    }

全部代码在这里:3 codes in total
我不是一个JavaScript的Maven,所以如果我只知道什么是错的,我改变了什么。

dsf9zpds

dsf9zpds1#

如果没有使用CSS和HTML,在不做假设的情况下回答这个问题有点棘手。
我建议的第一件事是为你要处理的不同的东西创建不同的变量名。看起来你对多个变量使用了相同的名称。这可能是你的主要问题:

<script>
const toggleButton = document.getElementById('toggle-button');
const body = document.body;

// Function to toggle between dark and light mode
function toggleDarkMode() {
    body.classList.toggle('dark-mode');
    // Save the user's preference to localStorage
    var imgElement = document.getElementById("image");
    var svgElement = document.getElementById("svg");
    if (body.classList.contains('dark-mode')) {
        localStorage.setItem('darkMode', 'enabled');
        toggleButton.textContent = 'Light';
        imgElement.src = "task2invert.png";
        svgElement.src = "logoinvert.svg";

    } else {
        localStorage.setItem('darkMode', 'disabled');
        toggleButton.textContent = 'Dark';
        imgElement.src = "task2.png";
        svgElement.src = "logo.svg";
    }
}

// Check localStorage for the user's preference and set the initial mode
if (localStorage.getItem('darkMode') === 'enabled') {
    body.classList.add('dark-mode');
    toggleButton.textContent = 'Light';
}

我把处理svg的变量名改为svgElement,但你可以使用任何你喜欢的变量名。

相关问题