huh
Expected ‘use strict’ at column 4, not column 0.
"use strict";
(function iife() {
"use strict";
function playButton5ClickHandler() {
var button = document.querySelector(".playButton5");
var player = document.querySelector("#player5");
This function needs a “use strict” pragma.
(function iife() {
(function iife() {
function playButton5ClickHandler() {
var button = document.querySelector(".playButton5");
var player = document.querySelector("#player5");
"use strict";
It isn’t giving you the line numbers to help you know which line it’s complaining about?
Expected ‘use strict’ at column 4, not column 0.
"use strict";
(function iife() {
"use strict";
function playButton5ClickHandler() {
var button = document.querySelector(".playButton5");
var player = document.querySelector("#player5");
"use strict";
What is it doing?
I can’t do this right.
You mean indentions?
Got it!!!
(function iife() {
"use strict";
function playButton5ClickHandler() {
var button = document.querySelector(".playButton5");
var player = document.querySelector("#player5");
player.volume = 1.0;
if (player.paused) {
button.querySelector(".pause").style.display = "inline-block";
button.querySelector(".play").style.display = "none";
player.play();
} else {
button.querySelector(".play").style.display = "inline-block";
button.querySelector(".pause").style.display = "none";
player.pause();
}
}
var playButton5 = document.querySelector(".playButton5");
playButton5.addEventListener("click", playButton5ClickHandler);
}());
1 Like
For future reference, the line numbers are shown on the right side as “row number column number” even though it doesn’t explicitly say row or line.
1 Like
Unused ‘playButton3’.
function playButton3(event) {
function playButton3(event) {
var button = getButton(event.target);
var player = button.querySelector("audio");
var play = button.querySelector(".play");
var pause = button.querySelector(".pause");
button.classList.add("clicked");
player.volume = 1.0;
What does unused mean?
Simply that as far as the linter knows, that isn’t used. In other words, “extra” code that isn’t needed and could be removed. eg.
var a = 1;
var b = 2;
console.log(a);
the variable b is unused.
function foo() {
return "foo";
}
function bar() {
return "bar";
}
var baz = foo();
the function bar is unused.
If you know that the function (or variable or whatever) is going to be used, only that you did not paste the code that uses it into the linter, you can ignore it.
That would be this code:
<style>
.playButton3 {
display: inline-block;
cursor: pointer;
height: 44px;
background-color: #000000;
border-top: 3px solid #0059dd;
border-bottom: 3px solid #0059dd;
margin-top:8px;
}
.playButton3.svoefm svg {
fill: #aaff00;
}
.playButton3.soundpark svg {
fill: #ffaa00;
}
.playButton3.cavoparadisoclub svg {
fill: #ff00aa;
}
.playButtons {
white-space: nowrap;
font-size: 0;
}
</style>
<div class="playButtons">
<div class="playButton3 svoefm" style="width: 83px; border-left: 3px solid #0059dd;" onclick="playButton3(event)">
<svg class="play" style="margin:15px 36px;" width="12" height="14" viewbox="0 0 85 100">
<path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
<svg class="pause" style="display: none;margin:15px 37px;" width="10" height="14" viewbox="0 0 60 100">
<path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
</svg>
<audio preload="none" style="display:none;">
<source src='http://163.172.187.253:8081/radio/svoefm/icecast.audio' type='audio/mpeg' />
</source></audio>
</div>
<div class="playButton3 soundpark" style="width: 88px; border-left: 3px solid #0059dd;border-right: 3px solid #0059dd;" onclick="playButton3(event)">
<svg class="play" style="margin:15px 39px;" width="12" height="14" viewbox="0 0 85 100">
<path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
<svg class="pause" style="display: none;margin:15px 40px;" width="10" height="14" viewbox="0 0 60 100">
<path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
</svg>
<audio preload="none" style="display:none;">
<source src='http://163.172.187.253:8081/radio/soundeep/icecast.audio' type='audio/mpeg' />
</source></audio>
</div>
<div class="playButton3 cavoparadisoclub" style="width: 83px;border-right: 3px solid #0059dd; " onclick="playButton3(event)">
<svg class="play" style="margin:15px 36px;" width="12" height="14" viewbox="0 0 85 100">
<path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
<svg class="pause" style="display: none;margin:15px 37px;" width="10" height="14" viewbox="0 0 60 100">
<path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
</svg>
<audio preload="none" style="display:none;">
<source src='http://s5.onweb.gr:8488/;' />
</source></audio>
</div>
</div>
<script>
function getButton(el) {
while (el.nodeName !== "HTML" && el.nodeName !== "DIV") {
el = el.parentNode;
}
return el;
}
function playButton3(event) {
var button = getButton(event.target);
var player = button.querySelector("audio");
var play = button.querySelector(".play");
var pause = button.querySelector(".pause");
button.classList.add("clicked");
player.volume = 1.0;
if (player.paused) {
play.style.display = "none";
pause.style.display = "inline-block";
player.play();
} else {
play.style.display = "inline-block";
pause.style.display = "none";
player.pause();
}
}
function showPause(event) {
var button = getButton(event.target);
var player = button.querySelector("audio");
player.isPlaying = function() {
return player.paused === false;
};
if (player.isPlaying()) {
button.querySelector(".pause").style.display = "inline-block";
}
}
function showSpeaker(event) {
var button = getButton(event.target);
var player = button.querySelector("audio");
player.isPlaying = function() {
return player.paused === false;
};
if (player.isPlaying()) {
button.querySelector(".pause").style.display = "none";
}
}
</script>
I don’t understand why it would say, unused, and how would it know?
Let me clean this code up first.
Unused ‘playButton3’.
function playButton3(event) {
29.13
Unused ‘showPause’.
function showPause(event) {
40.13
Unused ‘showSpeaker’.
function showSpeaker(event) {
(function iife() {
"use strict";
function getButton(el) {
while (el.nodeName !== "HTML" && el.nodeName !== "DIV") {
el = el.parentNode;
}
return el;
}
function playButton3(event) {
var button = getButton(event.target);
var player = button.querySelector("audio");
var play = button.querySelector(".play");
var pause = button.querySelector(".pause");
button.classList.add("clicked");
player.volume = 1.0;
if (player.paused) {
play.style.display = "none";
pause.style.display = "inline-block";
player.play();
} else {
play.style.display = "inline-block";
pause.style.display = "none";
player.pause();
}
}
function showPause(event) {
var button = getButton(event.target);
var player = button.querySelector("audio");
player.isPlaying = function () {
return player.paused === false;
};
if (player.isPlaying()) {
button.querySelector(".pause").style.display = "inline-block";
}
}
function showSpeaker(event) {
var button = getButton(event.target);
var player = button.querySelector("audio");
player.isPlaying = function () {
return player.paused === false;
};
if (player.isPlaying()) {
button.querySelector(".pause").style.display = "none";
}
}
}());
I don’t know if the linter is written to work with inline JavaScript. The only place I see it being used is
<div class="playButton3 svoefm"
style="width: 83px; border-left: 3px solid #0059dd;"
onclick="playButton3(event)">
As you already know, inline CSS and inline JavaScript is not best practice and should be avoided.
I think if you do a querySelector and an addEventListener it would stop the linter from complaining. Or, because you know why it’s complaining, you could ignore the linter and hope for the best.
I will be back in about 8 hours, but it says that it’s an unused function because it’s not used for anythung.
In other code, addEventListener was used with the function.
but it is used.
Now it won’t play after I did jslint.
You have to show me how to apply a certain code to it.
That iife thing.
After I applied
(function iife() {
"use strict";
It stopped working.
This is also the code where I received this:
Unused ‘playButton3’.
function playButton3(event) {
29.13
Unused ‘showPause’.
function showPause(event) {
40.13
Unused ‘showSpeaker’.
function showSpeaker(event) {
<style>
.playButton3 {
display: inline-block;
cursor: pointer;
height: 44px;
background-color: #000000;
border-top: 3px solid #0059dd;
border-bottom: 3px solid #0059dd;
margin-top:8px;
}
.playButton3.svoefm svg {
fill: #aaff00;
}
.playButton3.soundpark svg {
fill: #ffaa00;
}
.playButton3.cavoparadisoclub svg {
fill: #ff00aa;
}
.playButtons {
white-space: nowrap;
font-size: 0;
}
</style>
<div class="playButtons">
<div class="playButton3 svoefm" style="width: 83px; border-left: 3px solid #0059dd;" onclick="playButton3(event)">
<svg class="play" style="margin:15px 36px;" width="12" height="14" viewbox="0 0 85 100">
<path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
<svg class="pause" style="display: none;margin:15px 37px;" width="10" height="14" viewbox="0 0 60 100">
<path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
</svg>
<audio preload="none" style="display:none;">
<source src='http://163.172.187.253:8081/radio/svoefm/icecast.audio' type='audio/mpeg' />
</source></audio>
</div>
<div class="playButton3 soundpark" style="width: 88px; border-left: 3px solid #0059dd;border-right: 3px solid #0059dd;" onclick="playButton3(event)">
<svg class="play" style="margin:15px 39px;" width="12" height="14" viewbox="0 0 85 100">
<path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
<svg class="pause" style="display: none;margin:15px 40px;" width="10" height="14" viewbox="0 0 60 100">
<path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
</svg>
<audio preload="none" style="display:none;">
<source src='http://163.172.187.253:8081/radio/soundeep/icecast.audio' type='audio/mpeg' />
</source></audio>
</div>
<div class="playButton3 cavoparadisoclub" style="width: 83px;border-right: 3px solid #0059dd; " onclick="playButton3(event)">
<svg class="play" style="margin:15px 36px;" width="12" height="14" viewbox="0 0 85 100">
<path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
<svg class="pause" style="display: none;margin:15px 37px;" width="10" height="14" viewbox="0 0 60 100">
<path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
</svg>
<audio preload="none" style="display:none;">
<source src='http://s5.onweb.gr:8488/;' />
</source></audio>
</div>
</div>
<script>
(function iife() {
"use strict";
function getButton(el) {
while (el.nodeName !== "HTML" && el.nodeName !== "DIV") {
el = el.parentNode;
}
return el;
}
function playButton3(event) {
var button = getButton(event.target);
var player = button.querySelector("audio");
var play = button.querySelector(".play");
var pause = button.querySelector(".pause");
button.classList.add("clicked");
player.volume = 1.0;
if (player.paused) {
play.style.display = "none";
pause.style.display = "inline-block";
player.play();
} else {
play.style.display = "inline-block";
pause.style.display = "none";
player.pause();
}
}
function showPause(event) {
var button = getButton(event.target);
var player = button.querySelector("audio");
player.isPlaying = function () {
return player.paused === false;
};
if (player.isPlaying()) {
button.querySelector(".pause").style.display = "inline-block";
}
}
function showSpeaker(event) {
var button = getButton(event.target);
var player = button.querySelector("audio");
player.isPlaying = function () {
return player.paused === false;
};
if (player.isPlaying()) {
button.querySelector(".pause").style.display = "none";
}
}
}());
I think I got it, I’ll let you know if I need you.
How do I add this:
(function iife() {
"use strict";
}());
To the below code?
function getButton(el) {
"use strict";
while (el.nodeName !== "HTML" && el.nodeName !== "DIV") {
el = el.parentNode;
}
return el;
}
function playButton3(event) {
"use strict";
var button = getButton(event.target);
var player = button.querySelector("audio");
var play = button.querySelector(".play");
var pause = button.querySelector(".pause");
button.classList.add("clicked");
player.volume = 1.0;
if (player.paused) {
play.style.display = "none";
pause.style.display = "inline-block";
player.play();
} else {
play.style.display = "inline-block";
pause.style.display = "none";
player.pause();
}
}
function showPause(event) {
"use strict";
var button = getButton(event.target);
var player = button.querySelector("audio");
player.isPlaying = function () {
return player.paused === false;
};
if (player.isPlaying()) {
button.querySelector(".pause").style.display = "inline-block";
}
}
function showSpeaker(event) {
"use strict";
var button = getButton(event.target);
var player = button.querySelector("audio");
player.isPlaying = function () {
return player.paused === false;
};
if (player.isPlaying()) {
button.querySelector(".pause").style.display = "none";
}
}