setInterval function in Javascript

Dear people,I tried to create a HTML programme which increments a counter value and updates it on the browser display after every second and decrements counter value and updates it on the browser display after two seconds
The expected out is: 0,1,2,0
and the code I have written is

<html>
   <head>
      <title>Javascript</title>
   </head>
   <body>
      <h1>Javascript Interval function</h1>
      <button onclick="start_timer()">Start Timer</button>
      <br>
      <div id="counter"></div>
   </body>
   <script>
      var counter = 0;
      function start_timer(){
        setInterval(increment_counter,1000);
	setInterval(decrement_counter,2000);
      }
      
        function  increment_counter() {
             counter_element = document.getElementById("counter");
        counter_element.innerHTML = counter;
        counter = counter + 1;
	
      }
	function decrement_counter(){
	counter_element = document.getElementById("counter");
        counter_element.innerHTML = counter;
        counter = counter - 2;
	 }
   </script>
</html>

Please Help

@rutvikjoshi63 It seems you have not pasted the code. Use triple tilde quotes ` before and after the code you are writing.

<html>
   <head>
      <title>Javascript</title>
   </head>
   <body>
      <h1>Javascript Interval function</h1>
      <button onclick="start_timer()">Start Timer</button>
      <br>
      <div id="counter"></div>
   </body>
   <script>
      var counter = 0;
      function start_timer(){
        setInterval(increment_counter,1000);
	setInterval(decrement_counter,2000);
      }
      
        function  increment_counter() {
             counter_element = document.getElementById("counter");
        counter_element.innerHTML = counter;
        counter = counter + 1;
	
      }
	function decrement_counter(){
	counter_element = document.getElementById("counter");
        counter_element.innerHTML = counter;
        counter = counter - 2;
	 }
   </script>
</html>

it would be very much appreciated if anybody helped

Hi @rutvikjoshi63,

Check the code below.

<html>
   <head>
      <title>Javascript</title>
   </head>
   <body>
      <h1>Javascript Interval function</h1>
      <button onclick="start_timer()">Start Timer</button>
      <br>
      <div id="counter"></div>
   </body>
   <script>
      var counter = 0;
      var counter_element = document.getElementById("counter");
      
      function start_timer(){
        setInterval(increment_counter,1000);
        setInterval(decrement_counter,2000);
      }

      function  increment_counter() {
        console.log(counter)
        counter_element.innerHTML = counter;
        counter = counter + 1;
        
    }

    function decrement_counter(){
        console.log(counter)
        counter_element.innerHTML = counter;
        counter = counter - 2;
        
    }
</script>
</html> 

The operation (increment and decrement )on 2nd time happens simultaneously and it happens so fast that you will not able to to see on the screen.

But you can check on the console.log().

Check the screenshot of the output.

Thanks ,very much appreciated