How to use ontouchstart instead of onclick

Question

I am using the below code and it works on desktop but the click function is not working on mobile so I tried using ontouchstart but that is not working either. What am I doing wrong?

var video = document.getElementById("myVideo");
var btn = document.getElementById("myBtn");

function myFunction() {
    video.muted = !video.muted;
    btn.innerHTML = video.muted ? "Unmute":'Mute';
}

<section class="video-container">

  <div class="video-description">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>

  <video id="myVideo" autoplay loop>
    <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>

  <div class="content">

    <button id="myBtn" class="" onclick="myFunction()">Mute</button>
   <button id="myBtn" class="mobile" ontouchstart="myFunction()">Mute</button>
  </div>

Answer 1

Try this. it may works on both desktop and mobile.

var btn = document.getElementById("myBtn");
btn.addEventListener('click', myFunction, false);