This is my html form input

<form method="GET" action="">
    {% csrf_token %}
    <button class="btn btn-primary" action="" style="background-color: dodgerblue;">Search</button>
<input id="q" name="qq" type="text" placeholder="Enter search text here" style="width: 500px;">

This is my voice to text script,

<input type="text" name="" id="speechToText" placeholder="Speak Something" onclick="record()">

    <!-- Below is the script for voice recognition and conversion to text-->
    <script>
        function record() {
            var recognition = new webkitSpeechRecognition();
            recognition.lang = "en-GB";

            recognition.onresult = function(event) {
                // console.log(event);
                document.getElementById('speechToText').value = event.results[0][0].transcript;
            }
            recognition.start();

        }
    </script>

I obviously want to get rid of the secondary text field and wrap the onclick="record()" with the primary search button like this.

<input id="q" name="qq" type="text" placeholder="Enter search text here" style="width: 500px;" onclick="record()">

but when I do this, voice to text does not work anymore. What am I doing wrong? I also want to add a logic that the voice to text activates only when the user clicks a button. Please give some solutions. Thank you. Have a blessed day.