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.