javascript function not defines error in Symfony3 twig file

Question

I'm using Symfony3 for my project and I'm facing ReferenceError: optionOneChange is not defined error.

Here's my HTML Twig file:

{% extends 'base.html.twig' %}

{% block body %}

    <p id="question">{{ questions[0].desc }}</p>
    <form id="form">
        <input type="radio" id="option1" onclick="optionOneChange(1)"> {{ questions[0].ans1}}<br>
        <input type="radio" id="option2" onclick="optionOneChange(2)"> {{ questions[0].ans2}}<br>
        <input type="radio" id="option3" onclick="optionOneChange(3)"> {{ questions[0].ans3}}<br>
        <input type="radio" id="option4" onclick="optionOneChange(4)"> {{ questions[0].ans4}}<br>
    </form>

{% endblock %}

{% block javascripts %}

    <script src=" {{ asset('js/playGame.js') }}"></script>

{% endblock %}

and here's playGame.js file:

function optionOneChange(option)
{
    if (option == 1)
        $(document).getElementById("question").innerHTML = "one";
    else if (option == 2)
        $(document).getElementById("question").innerHTML = "two";
    else if (option == 3)
        $(document).getElementById("question").innerHTML = "three";
    else if (option == 4)
        $(document).getElementById("question").innerHTML = "four";
}

Thanks for your help.

Answer 1

I think you need to put a single quote around the parameter passed into your js function like so:

<form id="form">
  <input type="radio" id="option1" onclick="optionOneChange('1')"> {{ questions[0].ans1}}<br>
  <input type="radio" id="option2" onclick="optionOneChange('2')"> {{ questions[0].ans2}}<br>
  <input type="radio" id="option3" onclick="optionOneChange('3')"> {{ questions[0].ans3}}<br>
  <input type="radio" id="option4" onclick="optionOneChange('4')"> {{ questions[0].ans4}}<br>
</form>

Also, is your posting a cut & paste from your code? If so, I see a problem here:

<script src=" {{ asset('js/playGame.js') }}"></script>

There is an extra space in front, so try this instead:

<script src="{{ asset('js/playGame.js') }}"></script>

Not sure if that helps or not, but you can check.