How would I add another event to this code?

JavaScript
1

It already has onclick, if I want to add another event, how would I do this?

 <button id="playButton" style="border:thick solid blue; cursor: pointer; background-color:#000000;color:blue;width:50px; height:50px;" onclick="  
    var player = document.getElementById('player2').volume='1.0';
    var button = document.getElementById('playButton');
      var player = document.getElementById('player2');
      if (player.paused) {
        playButton.style.backgroundColor = '#000000';
        playButton.style.border = 'thick solid orange';
        player.play();
      } else {
        playButton.style.backgroundColor = '#000000';
        playButton.style.border = 'thick solid blue';
        player.pause();
      }">
     </button>
2

first thing to do is to get rid of the onclick.

to use multiple event listeners they MUST be coded properly as event listeners inside of the JavaScript. You can’t embed event listeners into HTML directly as jumbling HTML and JavaScript together became bad practice long before proper event listeners were added to JavaScript.

1 Like
3

Moved to the JS forum.

4

[quote=“asasass, post:1, topic:229747, full:true”]
It already has onclick, if I want to add another event, how would I do this?[/quote]

By using addEventListener, for example:

document.getElementById("playButton").addEventListener("click", function (evt) {
    // click event code in here
}, false);
1 Like
5

I couldn’t resist and had to update the code https://jsfiddle.net/wsotbk9s/66/

<button class="playButton"></button>

<audio class="player2">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg' />
</audio>

.playButton {
  border: thick solid blue;
  cursor: pointer;
  background-color: #000000;
  color: blue;
  width: 50px;
  height: 50px;
}

.play {
  border: thick solid orange;
}

.player2 {
  display: none;
}

document.querySelector(".playButton").addEventListener("click", function(evt) {
  var playButton = document.querySelector(".playButton");
  var player = document.querySelector('.player2');
  player.volume = '1.0';
  if (player.paused) {
    playButton.classList.add("play");
    player.play();
  } else {
    playButton.classList.remove("play");
    player.pause();
  }
});
4 Likes
6

I also couldn’t resist, and gave the O.P. a rock
solid example for multiple buttons here in…

…this post

…which catered for those with javasript disabled. :sunglasses:

As the O.P. totally ignored it, I can only assume that
his conversion to modern coding techniques, sadly,
will not be taking place in the foreseeable future. :sob:

But, what the heck, c’est la vie. :mask:

coothead

4 Likes
7

What he’s doing currently works. Issues of maintainability are not important at the moment.

8

Those inline CSS styles will come and bite him by the time he wants this responsive:mask:

Very nice js code there btw

1 Like
9

We all know that, including the OP. Unlike the rest of us, though, he doesn’t seem to be bothered by that fact. He appears to be living in some kind of weird, time-warp place (a digital Brigadoon, perhaps) where coding styles are archaic and mobiles are insignificant.

We’ve tried to rescue him from that plight, but seem unable to reach him. Maybe it’s some kind of force field…

10

Lol, this cowboy/maverick attitude will go nowhere in coding, that was my first valuable lesson.

The question itself is a classic example, further down the road, one will stumble upon event delegation etc and hopefully brighten up a bit.

1 Like
11

@asasass - why do you prefer to code entirely within the element attributes. Is there some performance benefit that you prefer?

12

yes.

13

How does that compare to the performance of the separated code? Can you post the results for that, too, so we can see the differences?

2 Likes
14

How do you find that out?

15

I don’t believe you can performance test inline html, css, javascript.

16

You can only do that on real javascript.

17

Sometimes what seems like a “simple” change like moving inline css to external files and removing inline JavaScript is not. For a small simple static website sure. However, for larger web applications it can be tough and introduce a lot of risk for the client. I currently work on a website created 6 years ago built by Indians that is riddled with inline css and JavaScript. Its not pretty but it works. I’m trying to do my best to clean it up but it is a huge job. So people shouldn’t be quick to judge others professionalism based on a few lines of code. A few lines of code only tells a very small story of the whole situation.

18

You just answered @Paul_Wilkins’s question by replying that you code this way because there is a performance benefit. To know that, you would need to have tested both the inline version and the version with the code separated.

[quote=“asasass, post:15, topic:229747, full:true”]
I don’t believe you can performance test inline html, css, javascript.
[/quote]Then what does your screenshot indicate?

(I’m not at all sure you can accurately test the comparison for just a few lines of code hosted on Blogger, because the page already comes with all the Blogger overheads.)

19

Thank you @asasass. Does this mean that you are also willing to take on information from Google developers about improving your page speed?

1 Like
20

None of this applies. He’s doing this as a hobby. He’s just starting out to learn to code. He’s never done code that wasn’t inline.

2 Likes