Javascript functions only work when the other javascript functions are disabled

Question

I made a test website for experimenting with javascript.

All 3 functions I created work independently, but only when the other functions are disabled (when they are comments). If I do not comment the other functions, all the functions behave weird and do not properly work (theme changer doesn't remember theme, TopButton gets displayed at the top when the page is loaded, etc.).

//HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>K E K</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="exde.js"></script>
</head>
<body>
    <button onclick="ChangeTheme()">Change Theme</button>
    <button onclick="ChangeTopButton()">Change Top-Button</button>
    <button onclick="ToggleTopButton()">Toggle Top-Button</button>
    <button id="topbutton" onclick="TopButton()">Go Top</button>

    <h1>Lorem Ipsum</h1>
    <p>Lorem ipsum dolor sit amet, ...</p>
</body>
</html>

//CSS
body {
    background-color: #CFF;
}
button#topbutton {
    position: fixed;
}
.displaynone {
    display: none;
}

//JS

// Change Theme
window.onload = function LoadTheme() {
    if (localStorage.theme) {
        if (localStorage.theme == "dark") {
            SetThemeDark();
        }
    }
    else {
        localStorage.setItem("theme","light");
    }
}
function ChangeTheme() {
    if (localStorage.theme == "dark") {
        SetThemeLight();
        localStorage.theme = "light";
    }
    else {
        SetThemeDark();
        localStorage.theme = "dark";
    }
}
function SetThemeDark() {
    let a = document.getElementsByTagName('body')[0];
    a.style.backgroundColor = '#444';
}
function SetThemeLight() {
    let a = document.getElementsByTagName('body')[0];
    a.style.backgroundColor = '#CFF';
}

// Change Top Button
window.onload = function LoadTopButton() {
    if (localStorage.topbutton) {
        switch(localStorage.topbutton) {
            case "bottomright":
                SetBottomRight();
                break;
            case "bottomleft":
                SetBottomLeft();
                break;
            case "topleft":
                SetTopLeft();
                break;
            case "topright":
                SetTopRight();
                break;
            default:
                SetBottomRight();
        }
    }
    else {
        localStorage.setItem("topbutton","bottomright");
        SetBottomRight();
    }
}
function ChangeTopButton() {
    switch(localStorage.topbutton) {
        case "bottomright":
            SetBottomLeft();
            localStorage.topbutton = "bottomleft";
            break;
        case "bottomleft":
            SetTopLeft();
            localStorage.topbutton = "topleft";
            break;
        case "topleft":
            SetTopRight();
            localStorage.topbutton = "topright";
            break;
        case "topright":
            SetBottomRight();
            localStorage.topbutton = "bottomright";
            break;
        default:
            SetBottomRight();
            localStorage.topbutton = "bottomright";
    }
}
function TopButton() {
    document.documentElement.scrollTop = 0;
}
function SetBottomLeft() {
    let a = document.getElementById("topbutton");
    a.style.right = "auto";
    a.style.top = "auto";
    a.style.left = "5px";
    a.style.bottom = "5px";
}
function SetBottomRight() {
    let a = document.getElementById("topbutton");
    a.style.left = "auto";
    a.style.top = "auto";
    a.style.right = "5px";
    a.style.bottom = "5px";
}
function SetTopLeft() {
    let a = document.getElementById("topbutton");
    a.style.right = "auto";
    a.style.bottom = "auto";
    a.style.left = "5px";
    a.style.top = "5px";
}
function SetTopRight() {
    let a = document.getElementById("topbutton");
    a.style.left = "auto";
    a.style.bottom = "auto";
    a.style.right = "5px";
    a.style.top = "5px";
}

// Toggle Top Button
window.onload = function LoadTopButtonOnLoad() {
    if (localStorage.displayButton) {
        if (localStorage.displayButton == "no") {
            DeleteTopButton();
        }
    }
    else {
        localStorage.setItem("displayButton","yes");
    }
}
function ToggleTopButton() {
    if (localStorage.displayButton == "yes") {
        DeleteTopButton();
        localStorage.displayButton = "no";
    }
    else {
        ShowTopButton();
        localStorage.displayButton = "yes";
    }
}
function DeleteTopButton() {
    let a = document.getElementById("topbutton");
    a.classList.add("displaynone");
}
function ShowTopButton() {
    let a = document.getElementById("topbutton");
    a.classList.remove("displaynone");
}

If you wan't to add multiple listeners to the same object for the same event use [`.addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) — Titus, Sep 20 '19 at 18:31
Or declare the functions as separate named functions and call them in `window.onload`, like `window.onload = function () { LoadTheme(); LoadTopButton(); LoadTopButtonOnLoad(); } — Heretic Monkey, Sep 20 '19 at 18:35

score 1 · Accepted Answer · answered Sep 20 '19 at 18:35

The reason is you are overriding the onload with the other function.

window.onload = 1;
window.onload = 2; // 1 will not work anymore

Use .addEventListener instead.

window.addEventListener('load', function() {
});

// instead of 
window.load = function () {
}

Javascript functions only work when the other javascript functions are disabled

1 Answers1