Cannot customize radio type in form.md with a new form-only.js javascript file

Archive
1

I want to make javascript available for form.md pages. This is what I have done so far:

  1. File: /user/themes/antimatter/templates/form.html.twig
    Comment: I added two new javascript files

{% extends ‘partials/base.html.twig’ %}

{% block content %}

{% block javascripts %}
{{ parent() }}
{% do assets.add('theme://js/utilities.js') %}
{% do assets.add('theme://js/form-only.js') %}
{% endblock %}
{{ assets.js() }}

{{ content }}
{% include "forms/form.html.twig" %}

{% endblock %}

  1. File: /user/themes/antimatter/js/utilities.js
    // Helper function to add an event listener
    function addEvent (el, event, callback) {
    if (‘addEventListener’ in el) { // If addEventListener works
    el.addEventListener(event, callback, false); // Use it
    } else { // Otherwise
    el[‘e’ + event + callback] = callback; // CreateIE fallback
    el[event + callback] = function () {
    el’e’ + event + callback;
    };
    el.attachEvent(‘on’ + event, el[event + callback]);
    }
    }

// Helper function to remove an event listener
function removeEvent(el, event, callback) {
if (‘removeEventListener’ in el) { // If removeEventListener works
el.removeEventListener(event, callback, false); // Use it
} else { // Otherwise
el.detachEvent(‘on’ + event, el[event + callback]); // Create IE fallback
el[event + callback] = null;
el[‘e’ + event + callback] = null;
}
}

  1. File: /user/themes/antimatter/js/form-only.js
    (function() {
    var form, options, other, otherText, hide; // Declare variables
    form = document.getElementById(‘my-survey-form’); // Get the form
    options = form.elements.Cq8; // Get the radio buttons
    other = document.getElementById(‘other’); // Other radio button
    otherText = document.getElementById(‘other-text’); // Other text input
    otherText.className = ‘hide’; // Hide other text input

for (var i = [0]; i < options.length; i++) { // Loop through radios
addEvent(options[i], ‘click’, radioChanged); // Add event listener
}

function radioChanged() {
hide = other.checked ? ‘’ : ‘hide’; // Is other checked?
otherText.className = hide; // Text input visibility
if (hide) { // If text input hidden
otherText.value = ‘’; // Empty its contents
}
}
}());

Finally my form page is
4. File: /user/pages/05.survey-form/form.md

title: 'Survey Form'
form:
    name: my-survey-form
    fields:
                -
            name: Cq8
            type: radio
            label: 8. Single File Size Limit                 
            options:
                1: Unlimited
                2: 10 GB
                3: 15 GB
                4: 4 TB
                other: Other                              
            validate:
                required: false
        -
            name: other-text
            type: text
            label: Other             
        
    buttons:
        -
            type: submit
            value: Submit

    process:
        -
            advise:
        -
            message: 'Your recommendation is coming'
        -
            display: recommendation

Sync and Share

Final Comment: Cannot get radio type in form.md work with form-only.js
It’s not working at all. Nothing about javascript. Do I need to edit anything else?