CODEWITHSUNDEEP
javascriptjqueryfunctioninput
Gregory Schultz
Gregory Schultz

Reputation: 844

Add a class to a button if aria-valuenow = 0

I'm trying to find a way to add a class testing to a button if the input has a aria-valuenow is 0.

My code so far:

(function() {
  if($('.plyr__volume input').attr('aria-valuenow')=="0"){
    $('.js-volume').addClass('test');
  } else {
    $('.js-volume').removeClass('test');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="plyr__control js-volume" data-plyr="mute"></button>
  <div class="plyr__volume">
  <input data-plyr="volume" type="range" min="0" max="1" step="0.05" value="1" 
  autocomplete="off" role="slider" aria-label="Volume" aria-valuemin="0"
  aria-valuemax="100" aria-valuenow="0" id="plyr-volume-2587" style="--value:0%; 
  width: 0px; left: 200px;" aria-valuetext="0.0%" class="plyr__tab-focus">
</div>

Upvotes: 1

Views: 533

Answers (3)

Mamun
Mamun

Reputation: 68923

IIFE (Immediately Invoked Function Expression)

It is a design pattern which is also known as a Self-Executing Anonymous Function and contains two major parts. The first is the anonymous function with lexical scope enclosed within the Grouping Operator (). This prevents accessing variables within the IIFE idiom as well as polluting the global scope.

The second part creates the immediately executing function expression () through which the JavaScript engine will directly interpret the function.

Your code is not executing at all, specify () at the end to make it an IIFE (Immediately Invoked Function Expression).

Demo:

(function() {
  var val = $('.plyr__volume input').attr('aria-valuenow');
  if(val == "0") $('.js-volume').addClass('test');
  else  $('.js-volume').removeClass('test');
})();
.test{
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button type="button" class="plyr__control js-volume" data-plyr="mute">My Button</button>
<div class="plyr__volume">
  <input data-plyr="volume" type="range" min="0" max="1" step="0.05" value="1" autocomplete="off" role="slider" aria-label="Volume" aria-valuemin="0"aria-valuemax="100" aria-valuenow="0" aria-valuetext="0.0%" class="plyr__tab-focus">
  
</div>

Upvotes: 1

4b0
4b0

Reputation: 22323

You are missing () on last when create function. Self-executing anonymous function need that ().

(function() {
  'use strict';
  if ($('.plyr__volume input').attr('aria-valuenow') == "0") {
    $('.js-volume').addClass('test');
    console.log($('.js-volume').attr('class'));
  } else {
    $('.js-volume').removeClass('test');
  }
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="plyr__control js-volume" data-plyr="mute"></button>
<div class="plyr__volume">
  <input data-plyr="volume" type="range" min="0" max="1" step="0.05" value="1" autocomplete="off" role="slider" aria-label="Volume" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" id="plyr-volume-2587" style="--value:0%; 
width: 0px; left: 200px;" aria-valuetext="0.0%" class="plyr__tab-focus">
</div>

Upvotes: 0

mrJoe
mrJoe

Reputation: 500

First of all, you need to execute this function, so you need to add () just before the final ;:

(function() {
  if ($('.plyr__volume input').attr('aria-valuenow') == "0") {
    $('.js-volume').addClass('test');
  } else {
    $('.js-volume').removeClass('test');
  }
})();

This function now works, and adds test class when aria-valuenow is 0. However, since (at least in this example) the input always has aria-valuenow attribute set to 0 and the button doesn't have test class initially, the else block seems to be totally pointless if the function is meant to run only once when the page is loaded.

Upvotes: 0

Related Questions