I want to show text in div with javascript-CodePudding

i am trying to make a javascript stopwatch here and i want to add time to div.circle and i don't know whats wrong in this code please help me!! thanks

 <-- this is html code --->


 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>stopwatch</title>
 <link rel="stylesheet" href="style.css">
 </head>
 <body>
 <div >
   <h1>Stopwatch</h1>
   <div ></div>
   <div >
    <button>Start</button>
    <button>Stop</button>
    <button>Reset</button>
   </div>
  </div>
 </body>
 <script>  
 <-- this is js code -->   

 let min = 0;
 let sec = 0;
 let mil = 0;

 let time = document.getElementsByClassName("circle");
 time = min   " : "   sec   " : "   mil ;
 time.innerHTML = time;
 console.log (time);

 </script>
 </html>

CodePudding user response：

Your code has some very fundamental pieces missing. I have changed it a bit to show something on button click but it will require way more efforts than that. I will highly recommend you to go through some tutorial in HTML, CSS, JS for a day or two.

const button = document.getElementsByTagName("button")[0];
button.onclick=() => {

 let min = 0;
 let sec = 0;
 let mil = 0;

 let time = document.getElementsByClassName("circle")[0];
 let timeString = min   " : "   sec   " : "   mil ;
 time.innerHTML = timeString;
 console.log(timeString);

}

 
 <div >
   <h1>Stopwatch</h1>
   <div ></div>
   <div >
    <button>Start</button>
    <button>Stop</button>
    <button>Reset</button>
   </div>
  </div>

CodePudding user response：

let time = document.getElementsByClassName("circle");
time = min   " : "   sec   " : "   mil;
time.innerHTML = time;

Those lines actually set the time variable as an element, but then break it and put it inside a string.

Should be like that:

const time = document.getElementsByClassName("circle");
time.innerHTML = min   " : "   sec   " : "   mil;