How to toggle reverse action using onclick event

Question

I am trying to change video tag object-fit from contain to fill which is working fine but i want to do the reverse means when user click the same button again then it will change the property from fill to contain.

<a href="#" onclick="changeStyle()"><i class="fa fa-play-circle"></i></a>

<video controls poster="source-to-thumb.jpg" id="player" style="object-fit:contain;">
    <source src="source-to-file.mp4" type="video/mp4"/>
</video>

<script>
var video = document.getElementsByTagName('video')[0];
function changeStyle() {
  if(video.style.objectfit === 'fill') {
    video.style.objectFit = 'contain';
  } else {
    video.style.objectFit = 'fill'
  }
}
</script>

Any suggestion would be appreciated thanks.

`video.style.objectfit` -> `video.style.objectFit` – Anurag Srivastava Apr 14 '20 at 17:54 — Anurag Srivastava, Apr 14 '20 at 17:54
thanks alot @AnuragSrivastava once again. – Ken Apr 14 '20 at 17:58 — Ken, Apr 14 '20 at 17:58

Scott Marcus · Accepted Answer · 2020-04-14T18:15:57.940

Instead of using inline styles (which should always be avoided when possible), use CSS classes. Then you can simply toggle the use of the class.

Also, see my HTML, CSS, and JavaScript comments about correcting some issues with your other code. Particularly, avoid methods that return "live" node list, like getElementsByTagName().

// Don't scan the whole document for all the matching
// elements when you know that there will only be one.
// Use getElementById() if there is an id.
var video = document.getElementById('player');

// Set up events in JavaScript, not HTML
document.querySelector("i.fa-play-circle").addEventListener("click", function(){
  // Just toggle the use of the other class:
  video.classList.toggle("fill");
});

/* Use CSS classes when possible */

i.fa-play-circle { cursor:pointer; }

/* This will be applied to the video by default */
video {
  object-fit:contain;
  border:1px solid black;
  height:150px;
  width:300px;
}

/* This class will be toggled on and off when the icon is clicked. 
   When it gets toggled on, the new object-fill value will override
   the previous one. When it gets toggled off, the previous style 
   will be restored. */
.fill {
  object-fit:fill;
}

<!-- Don't use hyperlinks just as a JavaScript hook.
     Hyperlinks are for navigation and using them for
     other purposes can cause problems for those using 
     screen readers.
     
     Any visible element supports a click event. Here,
     you can just set up the click event on the <i> element
     that people will be clicking on in the first place.
     
     Also, don't use inline HTML event attributes.
     Instead, separate your JavaScript into a script element.
-->
<i class="fa fa-play-circle">Hit play and then click Me several times</i><br>

<video controls poster="source-to-thumb.jpg" id="player">
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4"/>
</video>

How to toggle reverse action using onclick event

1 Answers1