Uncaught ReferenceError: <function> is not defined at HTMLButtonElement.onclick [duplicate] - javascript

This question already has answers here:
Why does this simple JSFiddle not work? [duplicate]
(8 answers)
Closed 5 years ago.
I have created my problem on JSFiddle at https://jsfiddle.net/kgw0x2ng/5/. The code is as follows
HTML CODE
<div class="loading">Loading…</div>
<button type="submit" onClick="hideButton()">Hide</button>
<button type="submit" onClick="showButton()">Show</button>
JS CODE
function hideButton(){
$(".loading").hide();
}
function showButton(){
$(".loading").show();
}
I am showing a spinner and I would like the spinner to hide when I click on the "Hide" button. I am getting the following error :
Uncaught ReferenceError: showButton is not defined
at HTMLButtonElement.onclick (VM282:180)
onclick # VM282:180
VM282:179
Uncaught ReferenceError: hideButton is not defined
at HTMLButtonElement.onclick (VM282:179)
onclick # VM282:179.
Can someone please suggest a solution?
Thanks
Sachin

Place your script inside the body tag
<body>
// Rest of html
<script>
function hideButton() {
$(".loading").hide();
}
function showButton() {
$(".loading").show();
}
</script>
< /body>
If you check this JSFIDDLE and click on javascript, you will see the load Type body is selected

Same Problem I had... I was writing all the script in a seperate file and was adding it through tag into the end of the HTML file after body tag.
After moving the the tag inside the body tag it works fine.
before :
</body>
<script>require('../script/viewLog.js')</script>
after :
<script>require('../script/viewLog.js')</script>
</body>

Related

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.

onclick attribute can't find Javascript function

I can't manage to link my Javascript function to my 'onclick' html attribute in the span tag.
I keep getting the error:
"Uncaught ReferenceError: closeAndRefresh is not defined" "at
HTMLSpanElement.onclick"
My code looks like this:
<div class="error">
<div id="errorMessage">
<span onclick="closeAndRefresh();">✖</span>
<p id="message">
<?php echo $confirmationMessage ?>
</p>
</div>
</div>
<script>
function closeAndRefresh() {
<?php $visibility = 'hidden' ?>
window.location.reload(true);
}
</script>
I'll also add a screenshot of my code:
Your script is after your HTML. Include it before html so that your function is defined
function closeAndRefresh(){
window.location.reload(true);
}
<span onclick="closeAndRefresh();">✖</span>
Try writing the script function closeAndRefresh() in the head tag of your html page.
Maybe the html page is not able to load the script when you write it inside the body.
If you have recently added the function to your javascript code, consider clearing the browser's cache, in order to force it reload the javascript code. To check if this is the problem, on your browser show the source html code, find the line where the javascript code is included, and click on it; it will show you the javascript source code the browser is currently using, that may be out of date. Also, as mentioned by others, make sure you include the javascript code before you reference it.
Make sure you reference the function correctly and also try putting the script above or below as it seems to be function not recognized.

Why doesn't onClick activate function? [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 6 years ago.
I'm trying to write a simple code in JavaScript where selecting a button calls a prompt function, but the prompt never pops.
This is the HTML:
<div id="btnDiv">
<button type="submit" id="btn" onclick="submit"> send info </button>
</div>
And this is the JavaScript code:
document.getElementById("btn").onclick = function(){
prompt("Thank you");
}
What am I doing wrong?
Make sure that the JS code is loaded after the HTML content, you can use onLoad event:
window.onload=function(){
document.getElementById("btn").onclick = function(){
prompt("Thank you");
}
};

(index):61 Uncaught ReferenceError: fnspeak1 is not defined

I have created a text to speech programm..and i get a error message which is give below
This is my program..
Html
<textarea id="message"></textarea>
<button type="button" onclick="fnspeak1()">
Play
</button>
Js
function fnspeak1()
{
var msg = new SpeechSynthesisUtterance(document.getElementById("message").value);
window.speechSynthesis.speak(msg);
}
However when run..and when the play button is clicked:
I get a error message like this:
Uncaught ReferenceError: fnspeak1 is not defined
Can someone help me with this..Thanks in advance
Ps;i am a beginner in js
I think you should type more code for me to analyze.
add window.onload = fnspeak1(){ your js code }or Jquery $(document).ready( your funciton here )
is your function under other action? for example: $(".a").on('click',function(){ your function })
if your html and js not in one page ,have you included js in the right way?

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.

Categories

Resources