Search code examples
javascriptjslintstrict

JSLint "This function needs a "use strict" pragma."


Anyone know the cause of the "This function needs a "use strict" pragma." errors i get when JSLinting this code? I could fix this by adding "use strict"; to all of my functions, but i'd rather know how to fix it alltogether. Cheers!

/*jslint browser: true, devel: true,  white: true, long: true, for: true*/
/*eslint-env browser*/
/*eslint 'no-console':0*/

var metronomebutton = document.querySelector("#playMetronome");
var stopmetronomebutton = document.querySelector("#stopMetronome");
var playing;
var audiobutton1 = document.querySelector("#c1Button");
var audiobutton2 = document.querySelector("#d1Button");
var audiobutton3 = document.querySelector("#e1Button");
var audiobutton4 = document.querySelector("#f1Button");
var audiobutton5 = document.querySelector("#g1Button");
var audiobutton6 = document.querySelector("#a1Button");
var audiobutton7 = document.querySelector("#b1Button");
var c1 = new Audio("Piano/c1.mp3");
var d1 = new Audio("Piano/d1.mp3");
var e1 = new Audio("Piano/e1.mp3");
var f1 = new Audio("Piano/f1.mp3");
var g1 = new Audio("Piano/g1.mp3");
var a1 = new Audio("Piano/a1.mp3");
var b1 = new Audio("Piano/b1.mp3");
var metronome = new Audio("Piano/tick.wav");
var artiesten = ["Mozart", "Beethoven", "Chopin"];
var i;



function dagartiest(artiesten)  {               //kiest een random artiest uit de array

    return artiesten[Math.floor(Math.random()* artiesten.length)];

}

for (i = 0; i < artiesten.length; i+=1) {       //Laat alle artiesten uit de array in de console zien

    console.log(artiesten[i]);
}

function playAudio() {                          //speel de noot c1

    c1.play();
    c1.currentTime =0;
}

function playAudio1() {                         //speel de noot d1

    d1.play();
    d1.currentTime =0;
}

function playAudio2() {                         //speel de noot e1

    e1.play();
    e1.currentTime =0;
}

function playAudio3() {                         //speel de noot f1

    f1.play();
    f1.currentTime =0;
}

function playAudio4() {                         //speel de noot g1

    g1.play();
    g1.currentTime =0;
}

function playAudio5() {                         //speel de noot a1

    a1.play();
    a1.currentTime =0;
}

function playAudio6() {                         //speel de noot b1

    b1.play();
    b1.currentTime =0;
}


function playMetronome(){
    playing = setTimeout(playMetronome, 500);   //speel elke halve seconde metronome af
    metronome.play();
}


function stopMetronome(){                       //stop timeout van de metronome
        clearTimeout(playing);
}

document.onkeydown = function(e) {              //speel de noot c1 als de a toets is ingedrukt
    if (e.which === 65){
        c1.play();
        c1.currentTime =0;
        document.getElementById("c1Button").classList.add("c1active");

    }   else if (e.which === 83){               //speel de noot d1 als de s toets is ingedrukt
        d1.play();
        d1.currentTime =0;
        document.getElementById("d1Button").classList.add("d1active");

    }   else if (e.which === 68){               //speel de noot e1 als de d toets is ingedrukt
        e1.play();
        e1.currentTime =0;
        document.getElementById("e1Button").classList.add("e1active");

    }   else if (e.which === 70){               //speel de noot f1 als de f toets is ingedrukt
        f1.play();
        f1.currentTime =0;
        document.getElementById("f1Button").classList.add("f1active");

    }   else if (e.which === 71){               //speel de noot g1 als de g toets is ingedrukt
        g1.play();
        g1.currentTime =0;
        document.getElementById("g1Button").classList.add("g1active");

    }   else if (e.which === 72){               //speel de noot a1 als de h toets is ingedrukt
        a1.play();
        a1.currentTime =0;
        document.getElementById("a1Button").classList.add("a1active");

    }   else if (e.which === 74){               //speel de noot b1 als de j toets is ingedrukt
        b1.play();
        b1.currentTime =0;
        document.getElementById("b1Button").classList.add("b1active");

    }
};


document.onkeyup = function(e){                 //verander css als een toets omhoog gaat
        document.getElementById("c1Button").classList.remove("c1active");
        document.getElementById("d1Button").classList.remove("d1active");
        document.getElementById("e1Button").classList.remove("e1active");   
        document.getElementById("f1Button").classList.remove("f1active");
        document.getElementById("g1Button").classList.remove("g1active");
        document.getElementById("a1Button").classList.remove("a1active");
        document.getElementById("b1Button").classList.remove("b1active");
};


document.getElementById("title").innerHTML = "Artiest van de dag: " + dagartiest(artiesten);
audiobutton1.addEventListener("click", playAudio, false);
audiobutton2.addEventListener("click", playAudio1, false);
audiobutton3.addEventListener("click", playAudio2, false);
audiobutton4.addEventListener("click", playAudio3, false);
audiobutton5.addEventListener("click", playAudio4, false);
audiobutton6.addEventListener("click", playAudio5, false);
audiobutton7.addEventListener("click", playAudio6, false);
metronomebutton.addEventListener("click", playMetronome);
stopmetronomebutton.addEventListener("click", stopMetronome);
document.addEventListener("load", dagartiest);

Here's the error

Undeclared 'Audio'.
var c1 = new Audio("Piano/c1.mp3");
15.13Undeclared 'Audio'.
var d1 = new Audio("Piano/d1.mp3");
16.13Undeclared 'Audio'.
var e1 = new Audio("Piano/e1.mp3");
17.13Undeclared 'Audio'.
var f1 = new Audio("Piano/f1.mp3");
18.13Undeclared 'Audio'.
var g1 = new Audio("Piano/g1.mp3");
19.13Undeclared 'Audio'.
var a1 = new Audio("Piano/a1.mp3");
20.13Undeclared 'Audio'.
var b1 = new Audio("Piano/b1.mp3");
21.20Undeclared 'Audio'.
var metronome = new Audio("Piano/tick.wav");
27.0This function needs a "use strict" pragma.
function dagartiest(artiesten)  {               //kiest een random artiest uit de array
33.0Expected 'for' to be in a function.
for (i = 0; i < artiesten.length; i+=1) {       //Laat alle artiesten uit de array in de console zien
38.0This function needs a "use strict" pragma.
function playAudio() {                          //speel de noot c1
44.0This function needs a "use strict" pragma.
function playAudio1() {                         //speel de noot d1
50.0This function needs a "use strict" pragma.
function playAudio2() {                         //speel de noot e1
56.0This function needs a "use strict" pragma.
function playAudio3() {                         //speel de noot f1
62.0This function needs a "use strict" pragma.
function playAudio4() {                         //speel de noot g1
68.0This function needs a "use strict" pragma.
function playAudio5() {                         //speel de noot a1
74.0This function needs a "use strict" pragma.
function playAudio6() {                         //speel de noot b1
81.0This function needs a "use strict" pragma.
function playMetronome(){
87.0This function needs a "use strict" pragma.
function stopMetronome(){                       //stop timeout van de metronome
91.21This function needs a "use strict" pragma.
document.onkeydown = function(e) {              //speel de noot c1 als de a toets is ingedrukt
131.19This function needs a "use strict" pragma.
document.onkeyup = function(e){                 //verander css als een toets omhoog gaat

JSHint doesn't give me any errors.

Also, if anyone could help me figure out why it's also complaining about Audio being undeclared, i would really appreciate the help!


Solution

  • JSLint enforces rules that its author, Douglas Crockford, thinks are appropriate. One of those is to require that you write code in strict mode. (I happen to agree that this is best practice.)

    Unfortunately, JSLint also complains if you put "use strict"; at the top of the file if you tell it you're targeting a browser (which is bizarre, as that's it's a perfectly reasonable thing to do).

    So your choices are:

    1. Put "use strict"; at the top of every function.

    2. Don't tell it you're targeting a browser, supply all the globals yourself, and add "use strict"; at the top of the file:

      "use strict";
      /*jslint browser: false, devel: true,  white: true, long: true, for: true*/
      /*global
      clearInterval, clearTimeout, document, event, FileReader, FormData, history, localStorage, location, name, navigator, screen, sessionStorage, setInterval, setTimeout, Storage, URL, window, XMLHttpRequest
      */
      /*eslint-env browser*/
      /*eslint 'no-console':0*/
      
      var metronomebutton = document.querySelector("#playMetronome");
      var stopmetronomebutton = document.querySelector("#stopMetronome");
      // ...
      
    3. Use something else, like ESLint. (And I notice you have a couple of ESLint-oriented comments in that code.) It offers better documentation and more control over the rules. For instance, its equivalent of this strict rule is documented here.