How to we call a function from an external JS file on click?

JS file on /Content/js/pj_no.js

function alertMe(){
    alert("me");
}

C#

@Scripts.Render("~/Content/js/pj_no.js")
<input value="親コード新規登録" type="button" onclick="alertMe()" />

Assuming this is in the same file iin my csHTML it is working fine. But when I put it on the external JS it is not calling anymore.

I know my JS is in the right directory as if i trigger an $(document).ready(function () {} it is calling the alert. But I need it to be on click event.

Help please

$(document).ready(function (
alert("me"); -- This is working,

function alertMe(){ //cant call this function
    alert("me");
}
)});

How to we call a function from an external JS file on click?

JS file on /Content/js/pj_no.js

function alertMe(){
    alert("me");
}

C#

@Scripts.Render("~/Content/js/pj_no.js")
<input value="親コード新規登録" type="button" onclick="alertMe()" />

Assuming this is in the same file iin my csHTML it is working fine. But when I put it on the external JS it is not calling anymore.

I know my JS is in the right directory as if i trigger an $(document).ready(function () {} it is calling the alert. But I need it to be on click event.

Help please

$(document).ready(function (
alert("me"); -- This is working,

function alertMe(){ //cant call this function
    alert("me");
}
)});

• javascript
• c#
• model-view-controller

• have you check if your javascript file loaded? you can check it using developer tools in the browser. e.g Press F12 – Jeric Cruz Commented Apr 25, 2017 at 3:28
• Yes it was loaded. I run the same script in the same file $(document).ready(function ( alert("me"); -- This is working, function alertMe(){ //cant call this function alert("me"); } )}); – Rey Norbert Besmonte Commented Apr 25, 2017 at 3:31
• did you see your pj_no.js independently with your view? – Jeric Cruz Commented Apr 25, 2017 at 3:36
• Yes. Again in the document.ready, the alert is already working, the function is not. I edited the question :) – Rey Norbert Besmonte Commented Apr 25, 2017 at 3:37
• where are you calling (document).ready ? in the C# view? – Jeric Cruz Commented Apr 25, 2017 at 3:40

5 Answers 5

$(document).ready(function (
  alert("me"); -- This is working,

  // NOTE: Following bees local function. and will not work
  function alertMe(){ //cant call this function 
      alert("me");
  }
)});

You need to make it global to get called. Please declare it out side of document ready function.

$(document).ready(function (
  alert("me"); -- This is working,

)});
  // NOTE: Following will work 
  function alertMe(){ 
      alert("me");
  }

you can bundle it first in App_Start > BundleConfig.cs inside RegisterBundles

bundles.Add(new ScriptBundle("~/bundles/pj_no").Include(
                        "~/Content/js/pj_no.js"));

then you can call it in your view :

@Scripts.Render("~/bundles/pj_no")
<input value="親コード新規登録" type="button" onclick="alertMe()" />

You just need to simply put the external js function in script folder.

Then simply call include it on view

@Scripts.Render("~/Scripts/pj_no.js")

Then simply call the function on onclick

<input value="親コード新規登録" type="button" onclick="alertMe()" />

Try the following code, it will work

window.alertMe = function(){ //can call this function
    alert("me");
}

Your code is not working because your function gets added to the local scope of $.ready function. By using window.alertMe your function will be added to global scope even if it is inside the $.ready method

It is working now with this way.

In MVC we rarely uses onclick event on input element, usually we use jQuery like this:

$("#elementname").click(function () {
 alertMe(); 
});
<input value="親コード新規登録" type="button" id="elementname" />. 

– Tetsuya Yamamoto