Develop Reference

I cannot call a function from my HTML button in my module Javascript file

The problem I am having is that my JavaScript file is becoming to big for me to work, so now I am using modules to make my code cleaner and easier for me to read. The problem is that I have a button in my HTML page that when clicked I want it to run my function in my script file. The file has the type module for my linked script files. But for some reason the browser keeps saying that my function is not defined. I have tried many things and the only way to get it to work is to get rid of the type="module". Is there a way to keep my JavaScript file module and still call a function from the DOM? I have triple checked my
spelling and curly brackets but it does not work.
Here is the html and JavaScript code below:
Here is the HTML Button
<button type="button" name="button" onclick="start()" class="sub" id="hover">Request a Quote</button>
Here is the HTML Script tags
<script src="scripts/page.js"></script>
<script src="scripts/second.js"></script>
<script type="module" src="scripts/main.js"></script> //this is the script I want to access
Javascript
//these are the imports for all included files
import { schval } from './script'
function start(){
function valSnapFrameSchedules(){
schval();
if (schval() === true){
alert("this came as true");
}
}
}
Here is the error code I get:
Paused on exception
ReferenceError: start is not defined

Try to add .js in the import line:
import { schval } from './script.js'
This error shows up when we set the type="module to the script line.
You can also check this article: https://www.tutorialspoint.com/why-can-t-my-html-file-find-the-javascript-function-from-a-sourced-module

Another solution which I prefer:
in your main.js add the following:
const hoverElement = document.getElementById('hover');
hoverElement.addEventListener('click', start);
function start(){
function valSnapFrameSchedules(){
schval();
if (schval() === true){
alert("this came as true");
}
}
valSnapFrameSchedules() // calling this function was missing in your code!
}
In your HTML file, you don't need to add onClick, so simply remove onclick="start()"
<button type="button" name="button" class="sub" id="hover">Request a Quote</button>
In this way, you don't need to access the function in the module from the HTML file.

Link to a HTML page inside a Javascript function

I want to link to a HTML file from a JavaScript on-click function. For that I used following function.
onClick: function () {
document.link("about.html");
}
But this is not working. So how can I add link inside of onClick function. Can anyone help me.

Usually I use this code:
<input type="button" value="Go to page" onclick="location.href='mypage.html'"/>
Anyway u can try:
onClick: function () {
location.href("about.html");
}

You can use the onclick property of a button element in HTML that will trigger a function when the button is pressed.
<button onclick="myFunc()">click me</button>
In your JavaScript file, you can then create the myFunc() function that will be called and executed soon after.
function myFunc() {
window.location = "otherpage.html";
}
According to W3C it's safer for cross-browser compatibility to use window.location rather than document.location.

onclick:function(){
window.navigate('your_url');
}

Try this:-
<input type="button" value="Go to page" onclick="openUrl()"/>
function openUrl() {
window.open("about.html");
//or
//window.location.href= "about.html";
}

onclick event is not working when function is in external javascript file

Before coming here I tried few links listed in stackoverflow, but none of them helped me to get this issue fixed Or may be I am doing something wrong.
I have a input button in my aspx and have serverclick event as well as onclick, both client and server methods are called correctly, I only facing problem when the 'onclick' function is in external file(it is in same directory).
I even referenced the js file in aspx.
NOTE :
all other controls are working in external js except this.
inline function works fine, but not when moved in external function.
I even tried window.onload() but it triggers the function during pageload which is not what I need.
aspx
<script type="text/javascript" src="external.js"></script>
Input button.
<input class="data" type="submit" name="cmdSubmit" value="Run Report" onclick="return FormValidate();"
onserverclick="RunReport" runat="server" id="Submit1" />
external.js
$(document).ready(function () {
function FormValidate() {
alert("Validated");
});

Please remove $(document).ready(function () { present around your function FormValidate() to make it global function. Right now by placing it inside ready handler you are making it a local scoped function. So your external.js should be:
function FormValidate() {
alert("Validated");
}

You need to define it as global function if written in external file
function FormValidate() {
alert("Validated");
};
Removing .ready(function...) around it will make it global which will be called in html file.

You are limiting scope of function keep it out of .ready(function...)
this will allow you function to be available globally

Yii: Firebug console ( function isn't defined ) when registering a function using clientscript

When I define a function in Yii view
Yii::app()->clientScript->registerScript('jqeury5',
"function fn(){ alert('hello'); }"
);
then try to call it, the Firebug says the "fn isn't defined" when I press on button.
<input type="button" value="Display alert box in 3 seconds"
onclick="fn()" />

Put the function in the <head> part, or <body> part of the html document that is generated. Use the third parameter of the registerScript() function.
So your code will be:
Yii::app()->clientScript->registerScript('jqeury5', "
function fn(){
alert('hello');
}",CClientScript::POS_HEAD);
For more details read the api documentation here.
P.S: i think by default the script is inserted in jQuery's ready function. Hence the function is not detected.

unable to call click event in JS file

Below is the html code:
<input type="button" id="abc" name="TechSupport_PartsOrder" value="Open Editor" />
Below is the JQuery Code:
$('#abc').click(function () {
alert('x');
});
Now when i put the above JQuery code to JS file it does not work, while when i put the same in page it works fine. Why this is happening i don't knw.
And if i call the function onclick of button like this:
<input type="button" id="abc" name="TechSupport_PartsOrder" onclick="abc()" value="Open Editor" />
JQuery:
function abc()
{
alert('x');
}
it works well..

Wrap the code in a ready handler:
$(function() {
$('#abc').click(function() {
alert('clicked');
});
});

Did you make sure that the event handler is getting defined after the DOM has loaded? This is why jquery recommends putting all your code in
$(document).ready(function(){
//XXX code goes here
});
you're event handler is probably try to be assigned before the element has been loaded into the DOM.

Does the following solve the problem?
$(function(){
$('#abc').click(function () {
alert('x');
});
})
Your code may be getting called before '#abc' has been added to the DOM