That code should now work, event when it’s inside of an IIFE, and you can remove the inline onclick attributes from the HTML code.
no.
<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 {
width: 83px;
border-left: 3px solid #0059dd;
}
.playButton3.svoefm svg {
fill: #aaff00;
}
.playButton3.soundpark {
width: 88px;
border-left: 3px solid #0059dd;
border-right: 3px solid #0059dd;
}
.playButton3.soundpark svg {
fill: #ffaa00;
}
.playButton3.cavoparadisoclub {
width: 83px;
border-right: 3px solid #0059dd;
}
.playButton3.cavoparadisoclub svg {
fill: #ff00aa;
}
.playButtons {
white-space: nowrap;
font-size: 0;
}
</style>
<div class="playButtons">
<div class="playButton3 svoefm" 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" 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" 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 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";
}
}
var playButtons = document.querySelectorAll(".playButton3");
playButtons.forEach(function addPlayButtonHandler(el) {
el.addEventListener("click", playButton3);
});
</script>
And no from me. I will not scroll through pages of code attempting to discern what’s wrong with it, when you can link us to the jsfiddle code instead.
I didn’t know jsfiddle is easier.
It is a conditional easier.
When showing small excerpts of code, putting that code in the post is certainly easier.
However, when dealing with large amounts of code or when debugging code that someone has written, having a place to run the code makes it much easier.
I was waiting for you to fix the problem according to my earlier instructions, but on checking - what I posted doesn’t seem to have turned up. Oops.
When attempting to use that code, the console says that the getButton function doesn’t exist. It looks like you remove it, when it was necessary to your code.
I last saw that function in your code that I was working with earlier, in https://jsfiddle.net/ex0bmys9/13/
Like this?
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";
}
}
var playButtons = document.querySelectorAll(".playButton3");
playButtons.forEach(function addPlayButtonHandler(el) {
el.addEventListener("click", playButton3);
});
The lack of a link means that an answer cannot be given.
Does it work?
There’s no scripting code in what you linked.
That’s why I don’t like using fiddle, it parses everything.
I want you to learn how to fix your own problems.
What does the console tell you that is wrong?
Ignore the issues that relate to browser or _dist-editor
In the Firefox console, you can click the JS down-arrow and turn off log and warning messages, so that only relevant errors are shown.
1 Like
ReferenceError: playButton3 is not defined[Learn More] show:1:1
onclick
My Firefox console shows something different, therefore you are using different code than what you linked to.
What is the code that you are testing.
Use of getAttributeNode() is deprecated. Use getAttribute() instead. _dist-editor.js:2:27387
SyntaxError: missing } after function body[Learn More]
In the Firefox console, you can click the JS down-arrow and turn off log and warning messages, so that only relevant errors are shown.
ReferenceError: playButton3 is not defined[Learn More] _display:1:1
onclick
It looks like you are moving on to find more problems, before you have fixed the first problem.
Don’t click on the buttons until you have no errors when loading the page.