How would I add text inside these 3 boxes? Is it possible?

My Code: https://jsfiddle.net/y2ug0xgv/1/

<button id="playButton" style="display:block;width: 606px;height:50px;border-radius:50px;background-image: linear-gradient(  to right,#000000 199px,#0059dd 199px, #0059dd 202px, #000000 202px,  #000000 399px, #0059dd 399px, #0059dd 402px,  #000000 402px  );border: 3px solid #0059dd; cursor: pointer;font-family: Tahoma; font-weight: bold;font-size:23px; color:#000000;"
onclick="  
var button = document.getElementById('playButton');
  var player = document.getElementById('player'); player.volume=1.0;
  if (player.paused) {
    playButton.innerHTML = '1980s.fm';
    playButton.style.background = 'linear-gradient(  to right,  #00ffff 199px,#0059dd 199px, #0059dd 202px,  #ffffff 202px,  #ffffff 399px, #0059dd 399px, #0059dd 402px,  #ff00ff 402px  )';
    player.play();
  } else {
    playButton.innerHTML = '';
    playButton.style.background = 'linear-gradient(  to right,  #000000 199px,#0059dd 199px, #0059dd 202px,  #000000 202px,  #000000 399px, #0059dd 399px, #0059dd 402px,  #000000 402px  )';
    player.pause();
  }">
</button>

<audio id="player" style="display:none;">
  <source src='' type='audio/mpeg' />
</source></audio>

I wanted to put text in each of the empty boxes, is there any possible way to do this?

Assuming you want only inline styles and that you are only looking for text that isn’t going to wrap then one way is like this:

<button id="playButton" style="display:block;width: 606px;height:50px;border-radius:50px;background-image: linear-gradient(  to right,#000000 199px,#0059dd 199px, #0059dd 202px, #000000 202px,  #000000 399px, #0059dd 399px, #0059dd 402px,  #000000 402px  );border: 3px solid #0059dd; cursor: pointer;font-family: Tahoma; font-weight: bold;font-size:23px; color:#000000;"
onclick="  
var button = document.getElementById('playButton');
  var player = document.getElementById('player'); player.volume=1.0;
  if (player.paused) {
    playButton.innerHTML = '1980s.fm';
    playButton.style.background = 'linear-gradient(  to right,  #00ffff 199px,#0059dd 199px, #0059dd 202px,  #ffffff 202px,  #ffffff 399px, #0059dd 399px, #0059dd 402px,  #ff00ff 402px  )';
    player.play();
  } else {
    playButton.innerHTML = '';
    playButton.style.background = 'linear-gradient(  to right,  #000000 199px,#0059dd 199px, #0059dd 202px,  #000000 202px,  #000000 399px, #0059dd 399px, #0059dd 402px,  #000000 402px  )';
    player.pause();
  }">
  <span style="float:left;width:33.3%;height:44px;line-height:44px;text-align:center;color:#fff">text here</span>
  <span style="float:left;width:33.3%;height:44px;line-height:44px;text-align:center;color:#fff">text here</span>
  <span style="float:left;width:33.3%;height:44px;line-height:44px;text-align:center;color:#fff;">text here</span>
</button>

<audio id="player" style="display:none;">
  <source src='' type='audio/mpeg' />
</source></audio>
1 Like

How would I then get the text to stay after you click on it, then click on it again. The text disappears but won’t come back. How would I get the text to come back?

It disappears because you destroy it.

playButton.innerHTML = '1980s.fm';
...
playButton.innerHTML = '';

Instead of destroying it, save it aside so that you can then put it back later.

2 Likes

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