我正面临着这个问题,我有两张图片,但只有其中一个是改变点击到倒置的版本.有一些问题,在代码中,或?
<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,所以如果我只知道什么是错的,我改变了什么。
1条答案
按热度按时间dsf9zpds1#
如果没有使用CSS和HTML,在不做假设的情况下回答这个问题有点棘手。
我建议的第一件事是为你要处理的不同的东西创建不同的变量名。看起来你对多个变量使用了相同的名称。这可能是你的主要问题:
我把处理svg的变量名改为svgElement,但你可以使用任何你喜欢的变量名。