无法使 Javascript 功能正常工作

Question

ORIGINALLY; I had a button trying to call a function but nested inside of a form, the button will trigger submit form event by default: The advice was to add a to the button tag and I was able to get past my original problem.

My new problem is:

So I have these buttons:

And I want to have these buttons trigger whether or not a date field is hidden or not.

    else if (question.Expected_Answer_Type == "Date")
{
    <input type="button" value="Add a Date @ViewBag.QuestionID" onclick="makeDateVisible(#@ViewBag.QuestionID)">

    @Html.TextBoxFor(m => m.QuestionnaireAnswers[i].Answer, Model.Date.ToString("M/d/yyyy"), new { @class = "form-control date hidden", @id = ViewBag.QuestionID }) if (Model.QuestionnaireAnswers == null)

    {
        <script>
            $(document).ready(function () {
                    $('#@(ViewBag.QuestionID)')
                        .val("@(DateTime.Today.ToShortDateString())");
                }

            );
            function makeDateVisible(@ViewBag.QuestionID) {
                alert("Hello");
            } 

        </script>
    }
}

I can't seem to get the Alert inside the makeDateVisible to trigger.

inside the browser.... I get the error: Uncaught SyntaxError: Invalid or unexpected token and the red line appears at the end of this line:

  <input type="button" value="Add a Date @ViewBag.QuestionID" onclick="makeDateVisible(#@ViewBag.QuestionID)">

Answer 1

Instead of a Button tag use an input tag, and add type=“button” to the tag and this should fix your issue. I linked a website for reference.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button

Answer 2

You should pass #@ViewBag.QuestionID in quotes then it will be treated as string argument

Otherwise, it is treated as variable thus error is generated.