Changeing color, or removing text of a button after it's clicked

JavaScript
1

1.) How would I change the color of the text after the button is clicked?

2.) If I wanted to remove the text after it’s clicked, what code would I use for that?

My Code

<button style=" background-image: url(http://i.imgur.com/tTd1mtq.png);border:none;cursor: pointer;background-color:transparent;width:266px;height:266px;font-family:Tahoma; font-weight: bold;font-size:14px; background-color:green;color:green;" onclick="document.getElementById('player4').volume=1.0;player4.paused ? player4.play() :player4.pause()">
Play</button>

<audio id="player4">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg' /></audio>
2

To change the color, you need to change the style of the button.

CSS uses something called specificity, which determines how browsers decide which css rules to ignore. The order of importance with CSS selectors is: element, class, id, and style.

Your use of the style attribute means that you cannot override it. Your only solution from here is to remove the green color from your style selector, moving it to an element selector.

Pro Tip: Use the least important CSS selector (element first, then class, etc…) to give you the greatest level of control.

Then when you want to override that green color with a different one (such as yellow), you can add a class name to the element.

Here’s the CSS

button {
  color: green;
}
.active {
  color: yellow;
}

And here’s the JavaScript that toggles whether the active class is on or off:

this.classList.toggle('active');

You can see it working in the jsfiddle at https://jsfiddle.net/xrjbruwx/1/

2 Likes
3

Your HTML code would then end up looking something like this:

<html>
<head>
  <style>
  button { ... }
  .active { ... }
  </style>
</head>
<body>
<button style="..."> ... </button>
<audio id="..."> ... </audio>
</body>
</html>

The later on, you can increase download speed by caching the CSS, by moving the styles to a separate file and loading the CSS with:

<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
...
</body>
</html>
4

[quote=“asasass, post:1, topic:233501, full:true”]
2.) If I wanted to remove the text after it’s clicked, what code would I use for that?[/quote]

You can remove the text with:

this.innerHTML = ' ';
5 
I was able to set it up like this. Looks good?


<button id="playButton" style="background-image:url('http://i.imgur.com/tTd1mtq.png'); width:266px; height:266px; border:none;cursor: pointer; font-family:Tahoma; font-weight: bold;font-size:14px; color:lime;" onclick="  
var button = document.getElementById('playButton');
var player = document.getElementById('player');
    player.volume=1.0;  {
    playButton.innerHTML = '';
    player.paused ? player.play() : player.pause();
  } ">
 Play </button>

<audio id="player" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg' />
</audio>
6

Do you want the Play text to return when you click on the button a second time to stop it playing?

7

For that you set it up like this.

onclick="  
var button = document.getElementById('playButton');
var player = document.getElementById('player');
player.volume=1.0; if (player.paused) {
   playButton.innerHTML = 'Pause';
    player.play();
  } else {
 playButton.innerHTML = 'Play';
    player.pause();
  }">
  Play</button>
8

No you don’t - JavaScript does not work when jumbled with HTML when proper security is implemented - that’s how it used to be done in the prehistoric 20th century but it certainly should NEVER be done that way unless the most modern browser you intend to support is Netscape 4.

You might like to write all your code as if it is 3000BC but don’t go advising others to be 5000 years out of date with the way they write it.

JavaScript MUST go in a separate file or your CSP headers will prevent ift from running at all.

9

I don’t think that is has any CSP headers.
The issues that he cares about seem to be very different from what we care about.

1 Like
10

that makes it much easier for hackers to inject code into his site

makes it a site for people to avoid just in case someone has injected something nasty

2 Likes
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.