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

Question

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>

`(function() {` should be `$(function() {` – Mosh Feu Jul 21 '19 at 11:22 — Mosh Feu, Jul 21 '19 at 11:22
What are you planning to use that class for? – JLRishe Jul 21 '19 at 11:29 — JLRishe, Jul 21 '19 at 11:29

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

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>

4b0 · Answer 2 · 2019-07-21T11:43:57.223

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>

score 0 · Answer 3 · answered Jul 21 '19 at 11:38

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.

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

3 Answers3

Linked