How to include multiple script sources? – Blancer.com Tutorials and projects

I have an issue that regars having multiple javascript srcs in one HTML file.

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Match</title>
    <link rel="stylesheet" type="text/css" href="stylesMatch.css" />
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            background-color: #eaf6f6;
        }
    </style>
    
</head>
<body>
    <h1 id="myH1">Match</h1>

    <div id="container">
        <div id="stopWatch">
            00:00
        </div>
        <div id="controls">
            <button id="startBtn" onclick="start()">Start</button>
            <button id="stopBtn" onclick="stop()">Stop</button>
        </div>
    </div>
    
    <div id="container2">
        <div id="countdown">
            30
        </div>
        <div id="controlsThirty">
            <button id="startBtnThirty" onclick="startThirty()">Start</button>
            <button id="resetBtnThirty" onclick="resetThirty()">Reset</button>
        </div>
    </div>
    <script src="thirtySeconds.js"></script>
    <script src="stopwatch.js"></script>
</body>

First javascript code:

const display = document.getElementById("countdown");
let countdownTimer = null;
let timeLeft = 30;

function startThirty() {
    if (!countdownTimer) {
        countdownTimer = setInterval(updateCountdown, 1000);
    }
}

function resetThirty() {
    clearInterval(countdownTimer);
    countdownTimer = null;
    timeLeft = 30;
    display.textContent = formatTime(timeLeft);
}

function updateCountdown() {
    timeLeft--;
    display.textContent = formatTime(timeLeft);

    if (timeLeft === 0) {
        clearInterval(countdownTimer);
        countdownTimer = null;
    }
}

function formatTime(seconds) {
    const remainingSeconds = seconds % 60;
    return `${String(remainingSeconds).padStart(2, "0")}`;
}

Second javascript code:

const display = document.getElementById("stopWatch");
let timer = null;
let startTime = 0;
let elapsedTime = 0;
let isRunning = false;

function start(){
    if(!isRunning){
        startTime = Date.now() - elapsedTime;
        timer = setInterval(update, 10);
        isRunning = true;
    }
}

function stop(){
    if(isRunning){
        clearInterval(timer);
        elapsedTime = Date.now() - startTime;
        isRunning = false;
    }
}

function update(){
    
    const currentTime = Date.now();
    elapsedTime = currentTime - startTime;

    let minutes = Math.floor(elapsedTime / (1000 * 60) % 60);
    let seconds = Math.floor(elapsedTime / 1000 % 60);

    minutes = String(minutes).padStart(2, "0");
    seconds = String(seconds).padStart(2, "0");

    display.textContent = `${minutes}:${seconds}`;
}

CSS in case anyone is wondering:

#myH1{
    text-align: center;
    font-size: 4rem;
    font-family: "Arial", sans-serif;
    color: hsl(0, 0%, 25%);
}
#container{
    margin-left: 700px;
    margin-right: 700px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px;
    border: 5px solid;
    border-radius: 50px;
    background-color: white;
}

#container2{
    margin-top: 50px;
    margin-left: 1000px;
    margin-right: 1000px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border: 4px solid;
    border-radius: 30px;
    background-color: white;
}


#stopWatch{
    font-size: 5rem;
    font-family: monospace;
    font-weight: bold;
    color: hsl(0, 0%, 30%);
    text-shadow: 2px 2px 2px hsla(0, 0%, 0%, 0.75);
    margin-bottom: 25px;
}

#countdown{
    font-size: 5rem;
    font-family: monospace;
    font-weight: bold;
    color: hsl(0, 0%, 30%);
    text-shadow: 2px 2px 2px hsla(0, 0%, 0%, 0.75);
    margin-bottom: 25px;
}
#controls button{
    font-size: 1.5rem;
    font-weight: bold;
    padding: 10px 20px;
    margin: 5px;
    min-width: 125px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    color: white;
    transition: background-color 0.5s ease;
}

#controlsThirty button{
    font-size: 1.5rem;
    font-weight: bold;
    padding: 10px 20px;
    margin: 5px;
    min-width: 125px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    color: white;
    transition: background-color 0.5s ease;
}

#startBtn{
    background-color: hsl(115, 100%, 40%);
}
#startBtn:hover{
    background-color: hsl(115, 100%, 30%);
}

#startBtnThirty{
    background-color: hsl(166, 100%, 40%);
}
#startBtnThirty:hover{
    background-color: hsl(166, 100%, 30%);
}
#stopBtn{
    background-color: hsl(10, 90%, 50%);
}
#stopBtn:hover{
    background-color: hsl(10, 90%, 40%);
}
#resetBtnThirty{
    background-color: hsl(205, 90%, 60%);
}
#resetBtnThirty:hover{
    background-color: hsl(205, 90%, 50%);
}

The issue is that when I include both javascript files with the tag only the first one works (in this case only functions from thirtySeconds.js work), when I swap them the other one doesn’t work. Does anyone know what should I do?

I looked all over the internet, youtube – tried stuff like defer, type=”module” but nothing seemed to work.