Using js .textContent does not apply changes to all pages in lists.html

support
1

Hi,

I have a js program which will onclick play/pause audio.

The script is added to my lists.html where I have a {{ range .Paginator.Pages }}.

the intention is for each page to display a play/pause button (and other links) next to the title, as each page contains audio.

all the underlying technical elements of the script work. however the play/pause button appears for the top page only. and changes for the top page only.

{{ range .Paginator.Pages }}
  <a id="title" href="{{ .RelPermalink }}">{{ .Title }}</a>
  {{ range .Params.audio }}
    <audio id="aud">
      <source src="{{ . }}" preload="auto" type="audio/mp3">
      Your browser doesn't support embedded audio.
    </audio>
    <a onclick="Play()" id="play"></a>
    <script type="text/javascript" src="/js/play.js"></script>
  {{ end }}
{{ end }}

and the script is simply

var audio = document.getElementById("aud");
var button = document.getElementById("play");
play.textContent = "play";

function Play() {
  if (audio.paused) {
    audio.play();
    play.textContent = "pause";
  } else {
    audio.pause();
    play.textContent = "play";
  }
}

as i mentioned even if i add “play” between the the play IS added to every page however if i click on any of those links only the top page changes from play to pause.

2

This is not related to Hugo in any way. You have a JavaScript problem, duplicating element id’s everywhere. I suggest you raise an issue on Stack Overflow or similar.

Also, when posting code, configuration, or data on this forum, please wrap the text within backticks or use the </> button in the menu.

```
my code
```

I’ve corrected your post.

3

thanks for pointing that out. i thought there may be some special hugo syntax im missing thats preventing the javascript from being applied to every page.