Two versions of a playButton Binding Audio With a grid link structure


#125

display: none;


#126

The scripting code only affects the class name of the element. Can you tell what needs to be done instead of display:none ?


#128

pause hide


#129

I don't know.


#130

What does the console say for the show or display page, when you now click on the image to start it playing?


#131

The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.
htmledit.squarefree.com
TypeError: player is null
[Learn More]
htmledit.squarefree.com:122:7
playButtonClickHandler


#132

Use of getAttributeNode() is deprecated. Use getAttribute() instead.
_dist-editor.js:2:27387
An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can remove its sandboxing.
jsfiddle.net
TypeError: player is null
[Learn More]
_display:176:7
playButtonClickHandler


#133

I have been assuming that you are using jsfiddle to do the testing

What do you want to do from here? Do the testing with jsfiddle, or provide information on how I can achieve the same environment that you are doing the testing with.


#134

TypeError: player is null
[Learn More]
_display:176:7
playButtonClickHandler


#135

There:
https://jsfiddle.net/87serhpf/1/


#136

So it looks like the audio problem is blocking further progress on the play button issue.

An important lesson to learn here is to test more frequently. Test every time you make a change is the most reliable policy.

Fixing the play button needs to be put on hold, until the audio issue is fixed.


#137

ok......


#138

Here's the scripting code that retrieves the audio element.

var player = playButton.querySelector("audio");

Is the HTML audio element inside of the playButton? Or is it currently somewhere else?


#139

    function playButtonClickHandler() {
      document.querySelector(".myLink").classList.remove("hide");
      var button = document.querySelector(".playButton");
      var player = playButton.querySelector("audio");
      playButton.querySelector(".initial").classList.add("hide");
      player.volume = 1.0;
      if (player.paused) {

#140

Dumping JavaScript code doesn't answer my question.

Is the HTML audio element inside of the playButton? Or is it currently somewhere else?


#141

Inside.


#142

See: audio


#143

Why do you think that in the code at https://jsfiddle.net/87serhpf/1/ that the <audio> element is inside of the element called playButton?


#144

You told me to remove player and add audio.


#145

That's not relevant to my question.

Why do you think that in the HTML code at https://jsfiddle.net/87serhpf/1/ that the <audio> element is inside of the element called playButton?