title: How to assign clearInterval function to the button which would stop the function started by another button?
body: <p>As I understood from MDN, I am supposed to make variable and assign <code>setInterval</code> function to it, so that I could use that variable and call clearInterval for it, but for some reason, my code is now working. It is properly fetching data with buttonStart, but will not stop fetching data with buttonStop.
  Thank you for your time.</p>
  <pre><code>const buttonStart = document.querySelector('#start')
  const buttonStop = document.querySelector('#stop')
  const list = document.querySelector('#list')
  
  class Price {
      constructor(time, price) {
          this.time = time
          this.price = price
      }
  }
  
  const fetchBitcoin = async () =&gt; {
      try {
          const res = await fetch('https://api.cryptonator.com/api/ticker/btc-usd');
          const data = await res.json();
          const newPrice = new Price(data.timestamp, data.ticker.price)
          return newPrice
      } catch (e) {
          console.log(&quot;Something went wrong in downloading price&quot;, e)
      }
  }
  
  const addNewPrice = async () =&gt; {
      const newLI = document.createElement('LI')
      const newElement = await fetchBitcoin()
      const newTime = convertTime(newElement.time)
      newLI.append(newTime, ' ', newElement.price.slice(0, 8))
      list.append(newLI)
  }
  
  function convertTime(time) {
      let unix_timestamp = time
      var date = new Date(unix_timestamp * 1000);
      var hours = date.getHours();
      var minutes = &quot;0&quot; + date.getMinutes();
      var seconds = &quot;0&quot; + date.getSeconds();
      var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
      return formattedTime
  }
  
  let interval = buttonStart.addEventListener('click', () =&gt; {
      setInterval(addNewPrice, 2000)
  })
  
  buttonStop.addEventListener('click', () =&gt; clearInterval(interval));
  </code></pre>