Javascript function firing on page load

Hi,

I'm building my first web app using Jumpstart and I'm running into a weird issue with the Javascript in one of my show views.

The issue I have is that instead of firing on click, the toggleCompleted function fires every time the page is loaded/refreshed. What I don't understand is that this issue doesn't seem to affect the other functions such as loadNormal and loadSlow.

I spent hours looking for a solution and trying various things but nothing worked. I suspect this may be an issue with Turbo and how Rails 6 handles javascript but I'm not sure how to solve it.

Any idea?

Thanks

<div class="container px-4 mx-auto my-8">
  <div class="max-w-3xl mx-auto">
    <div class="flex items-center justify-between mb-4">
      <h1 class="h3"><%= link_to "Conversations", conversations_path %> >
        <%= @conversation.title %>
      </h1>
      <div class="inline-flex">
          <% if @conversation.completed == false %>
            <button class="btn-tertiary btn-small mr-3", 
            onclick="toggleCompleted()" 
          >Mark As Completed</button>
          <% else %>
            <button class="btn-tertiary btn-small mr-3",
            onclick="toggleCompleted()">Completed</button>
          <% end %>
           <%= @conversation.level %>
        </h5>
      </div>
    </div>
<div id="waveform"></div>
<script>
  wavesurfer = WaveSurfer.create({
      container: '#waveform',
      waveColor: 'blue',
      progressColor: 'purple',
      backend: 'MediaElementWebAudio',
  });

  wavesurfer.empty();

  wavesurfer.load("<%= url_for(@conversation.normal_audio) %>")

</script>


<div class="flex justify-evenly mb-4">
  <div>
    <button class="ml-2 bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 
    rounded" onclick="wavesurfer.skipBackward(); wavesurfer.play()">Rewind</button>

    <button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 
    rounded" onclick="wavesurfer.playPause()">Play/Pause</button>
  </div>
  <div>

    <button class="ml-2 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 
    rounded" onclick="loadSlow()">Slow</button>

    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 
    rounded" onclick="loadNormal()">Normal</button>

    <button class="ml-2 bg-red-500 hover:bg-green-700 text-white font-bold py-2 px-4 
    rounded" onclick="loadPractice()">Practice</button>
  </div>
</div>
    <div class="p-8 bg-white rounded shadow">
      <div class="flex space-x-8 justify-between text-2xl mt-10">
        <div>
          <% @conversation.phrases.each do |phrase| %> 
            <p><%= phrase.french_text %><p>
            <br>
          <% end %>
        </div>
        <div>
          <% @conversation.phrases.each do |phrase| %> 
            <p><%= phrase.english_text %></p>
            <br>
          <% end %>
        </div>
      </div>
    </div>
  </div>
</div>

<script>

function loadNormal() {
  wavesurfer.load("<%= url_for(@conversation.normal_audio) %>");
  wavesurfer.setWaveColor('blue');
};

function loadSlow() {
  wavesurfer.load("<%= url_for(@conversation.slow_audio) %>")
  wavesurfer.setWaveColor('green');
};

function loadPractice() {
  wavesurfer.load("<%= url_for(@conversation.conversation_practice) %>")
  wavesurfer.setWaveColor('red');
};

wavesurfer.on('seek', function () {
  wavesurfer.play();
});

function toggleCompleted() {
  <% if @conversation.completed == true %>
    <% @conversation.update(completed: false) %>
  <% else %>
    <% @conversation.update(completed: true) %>
  <% end %>
  }
</script>

Ok so it seems like the issue is that I need to export the functions from the file and then import them in application.js.

import * as myModule from "./peaks-setup";

window.myModule = myModule

After doing this, I can now call myModule.functionName() in the view and it works. Not sure it's the best way but it seems to work.