html code
<input type="button" value="+" onclick="alert()" />
In chrome after inspecting it showing this error Uncaught RangeError: Maximum call stack size exceeded.
javascript
<script type="text/javascript">
function alert() {
alert("Hello! I am an alert box!!");
}
</script>
help me by telling how to solve this
You override the existing function definition with new definition, which in addition is calling itself, causing too much recursion.
As other users mentioned you just need to create your function with a different name than alert() which is an already defined function in javascript, you shouldn't be using that.
I would rather use the standard addEventListener, will make your code cleaner as well as your html
You can do something like this, also you can try it right from this page:
function myDefinedAlert() {
alert("Hello! I am an alert box!!");
}
var el = document.getElementById("yourButton");
el.addEventListener("click", myDefinedAlert, false);
<input id="yourButton" type="button" value="+" />
Press the button, try it, and copy it to your code, let me know if it works :)
that's because you call alert() in alert(), so it turns out in recursion.
The alert() is a built-in function, which is not meant to be redefined. Although you redefine, you are calling the same function inside the new function, which is wrong. So, in simple terms, give a different name like myAlert() or something:
function myAlert() {
alert("Hello! I am an alert box!!");
}
So recursively the alert() function gets called and it overflows the stack.
Solution Snippet
function myAlert() {
alert("Hello! I am an alert box!!");
}
<input type="button" value="+" onclick="myAlert()" />
You can not have a recursive function such as what you have done here in Javascript as it would continue to loop out of control and consume more memory in the browser. When you call a function from within a function you need to make sure that you are not calling the same function.
Related
This question already has answers here:
Why isn't my JavaScript working in JSFiddle?
(7 answers)
Closed 3 months ago.
There is some code I wanted to put into JSFiddle. It didn’t work. Narrowing it down I can’t even get this simplest of code to work:
JSFiddle
function displaymessage() {
alert("Hello World!");
}
<form>
<input type="button" value="Click me!" onclick="displaymessage()" />
</form>
<p>By pressing the button above, a function will be called. The function will alert a message.</p>
The alert box doesn’t show up in the JSFiddle.
Select No wrap - bottom of <head> in the “Load type” dropdown in the JavaScript settings.
You need to take your function out of the onLoad/onReady otherwise it is placed inside of another scope and your button cannot access the function. In your case you need to use
No wrap (head)
The code generated looks like this:
Ext.onReady(function() {
function displaymessage()
{
alert("Hello World!");
}
});
Change the code to run "no wrap (head)" instead of "onDomReady". Your function isn't visible to your markup as is.
Maybe some of you need to move your function outside of document.ready if you use html onclick="func()"
$(document).ready(function() {
...
}
function func(){
...
}
If you still have problems, check whether you have
AdBlockers installed as a browser extension? (i.e. AdBlocker Plus)
Turn off AdBlockers in JSFiddle and run again.
I hope this helps some one.
Thanks.
Sorry but... is much simpler than what you propose...
If you want to call a js function with "onclick" attribute, put your javascrit code directly in head, you dont need domready or similars.
Second, you need to include "javascript:" before the function name.
See: http://jsfiddle.net/XNJxT/1838/
<input type="button" value="Click me!" onclick="javascript:displaymessage()" />
My problem to this was when I made my script tag I typed it out :
script type="javascript/text"
instead of :
script type="text/javascript"
and now it works.
http://jsfiddle.net/praveen_prasad/XNJxT/14/
Js fiddle so something like this to whatever you write
window.addEvent('load',function(){
//Your code
});
I have this as my function, it's currently just a test.
<button onclick=function test()>Test The Function!</button>
<script>
function test(){
return('Try Again!')
}
</script>
According to the console whenever I call on the function, "expected expression, got end of script"
Are there any errors or am I doing this wrong? The function is in the head.
Edit: In response to the comments, this is my code after attempting to do what the comments said. Note: This does not work for me. I am using Firefox, and it is on the f12 editor on the about:blank page.
<html><head></head><body>
<script>
function test() {
alert("You clicked the button");
}
</script>
<button onclick="test()">Using Javascript</button>
</body></html>
Yes, I know this works in the snippet or fiddle, but it doesn't work in the html code in an about:blank page. Can anyone figure out the problem? I click the button and NOTHING happens.
You need to update your code to:
<button onclick="test()">Test The Function!</button>
You will also have to move the function definition before the call in the html, or else test will be undefined.
Few issues I see:
Wrap the function call in "
Create script above the template
Calling the function without the word function
Where do you expect to return in the function? If you want to see something in the console use console.log or if you want an alert use alert().
Not all of those are wrong but its best to struct them like that.
fiddle: https://jsfiddle.net/8x0avrv5/
Complete code:
<script>
function test(){
alert('Try Again!');
}
</script>
<button onclick="test()">Test The Function!</button>
To answer your question this is the correct syntax:
<button onclick="return click1()">
Using javascript
</button>
javascript
function click1() {
alert("You clicked the button");
return true;
}
As another option you can use Jquery instead
<button id="click">
Using jquery
</button>
Jquery
$("#click").click(function() {
alert("You clicked the button");
});
See examples here: https://jsfiddle.net/hzkwxo3q/2/
I wish to show out other objects when the onclick function is clicked. When i click that button, it will hide one object and show two other objects. I have already set the style.visibility to visible. But the show two object does not works.
Update Sample:
<input type="submit" id="show" name="show" value="show" onclick="RemoveDoc(); document.getElementById('docname').style.visibility='hidden'; document.getElementById('browse').style.visibility='visible'; return false;" />
//browse input
<input type ="file" name="browse" id="browse">
Method 2:
//Using my RemoveDoc() function, I want the button of browse being show out.
function RemoveDoc(Doc)
{
xmlhttp1=new XMLHttpRequest();
xmlhttp1.open("GET","functions/remove.php?Doc="+Doc,true);
xmlhttp1.onreadystatechange=function()
{
if (xmlhttp1.readyState==4 && xmlhttp1.status==200)
{
//when i run debugging, it says that the style of null..
document.getElementById("browse").style.visibility='visible';
}
}
xmlhttp1.send();
return false;
}
</script>
I tried two methods which both also cant show the browse button.
It should call out my visible on browse object as it's visible.. kindly advise.
http://jsfiddle.net/y3Bad/
A few things: you should include the visibility code inside of your removeDoc function, and bind the handler from javascript, not in markup. Also, your variable xmlhttp1 is an implicit global. Your removeDoc function takes a parameter, Doc, but you never pass anything to it. Finally, removeDoc makes an ajax call, which is asynchronous, so your line of code to show the browse button will not execute immediately, and may never execute at all if your ajax calls fails.
HTML:
<input type="button" id="show" name="show" value="show" />
JS:
document.getElementById('show').onclick = function () {
// use display instead of visibility if you don't want the hidden element to take up space
// setting visibility to empty string will show the element
document.getElementById('browse').style.visibility = '';
};
I use these two functions:
function hide(objId) {
document.getElementById(objId).style.display="none";
}
function show(objId) {
document.getElementById(objId).style.display="";
}
Maybe you can try to use jQuery, something like this:
http://jsfiddle.net/7fJuu/
This question already has answers here:
Why isn't my JavaScript working in JSFiddle?
(7 answers)
Closed 3 months ago.
There is some code I wanted to put into JSFiddle. It didn’t work. Narrowing it down I can’t even get this simplest of code to work:
JSFiddle
function displaymessage() {
alert("Hello World!");
}
<form>
<input type="button" value="Click me!" onclick="displaymessage()" />
</form>
<p>By pressing the button above, a function will be called. The function will alert a message.</p>
The alert box doesn’t show up in the JSFiddle.
Select No wrap - bottom of <head> in the “Load type” dropdown in the JavaScript settings.
You need to take your function out of the onLoad/onReady otherwise it is placed inside of another scope and your button cannot access the function. In your case you need to use
No wrap (head)
The code generated looks like this:
Ext.onReady(function() {
function displaymessage()
{
alert("Hello World!");
}
});
Change the code to run "no wrap (head)" instead of "onDomReady". Your function isn't visible to your markup as is.
Maybe some of you need to move your function outside of document.ready if you use html onclick="func()"
$(document).ready(function() {
...
}
function func(){
...
}
If you still have problems, check whether you have
AdBlockers installed as a browser extension? (i.e. AdBlocker Plus)
Turn off AdBlockers in JSFiddle and run again.
I hope this helps some one.
Thanks.
Sorry but... is much simpler than what you propose...
If you want to call a js function with "onclick" attribute, put your javascrit code directly in head, you dont need domready or similars.
Second, you need to include "javascript:" before the function name.
See: http://jsfiddle.net/XNJxT/1838/
<input type="button" value="Click me!" onclick="javascript:displaymessage()" />
My problem to this was when I made my script tag I typed it out :
script type="javascript/text"
instead of :
script type="text/javascript"
and now it works.
http://jsfiddle.net/praveen_prasad/XNJxT/14/
Js fiddle so something like this to whatever you write
window.addEvent('load',function(){
//Your code
});
I will try to explain my problem. I have 4 files index.html, event.js, start.js and form.php.
index.html
<head><script type="javascript/text" src="start.js></script></head>
<html>
<button id="bt" type="button">Click</button>
<div id="test"></div>
</html>
start.js
window.onload=init;
function init(){
document.getElementById("bt").onclick=function(){
getFile('form.php?x='+Math.random()*11, getPHP);
getFile('javascripts/event.js?x='+Math.random()*11,getJS);
}
}
function getFile(source,callFunc){
var xmlHttpR=false;
if (window.XMLHttpRequest)
xmlHttpR=new XMLHttpRequest();
else if (window.ActiveXObject)
xmlHttpR=new ActiveXObject("Microsoft.XMLHttp");
else
alert("Error");
if (xmlHttpR){
xmlHttpR.open("GET",source,true);
xmlHttpR.onreadystatechange=function(){
if (xmlHttpR.readyState==4 && xmlHttpR.status==200){
callFunc(xmlHttpR);
delete xmlHttpR;
xmlHttpR=null;
}
}
}
xmlHttpR.send(null);
}
function getPHP(response){
document.getElementById("test").innerHTML=response.responseText;
}
function getJS(response){
eval(response.responseText);
}
event.js
document.getElementById("firstName").onblur=function(){
validate(this.name,this.value);
}
form.php
<html>
<form>
<input type="text" id="firstName" value="">
</form>
</html>
OK, the problem now, when onblur event is triggered on firstName nothing happens but when I refresh the page sometimes once or twice, the event is working as it should be. Maybe I'm getting the response not at the right time?
Is there something wrong with the callback function and the eval and I use to assign onblur event to the firstName field?
is the problem with the AJAX asynchronous call? Should I use synchronous? What am I missing?
I hope I could explain clearly what the problem is.
Thanks in advance for any help.
yeah, it sounds like a race condition between the asynchronous calls. sometimes the JS returns first and sometimes the PHP returns first.
you could try loading the JS as part of the callback for the PHP ajax call.
something like this should work:
EDIT:
pass response through anonymous function and down to getPHP
getFile('form.php?x='+Math.random()*11, function(response) {
getPHP(response);
getFile('javascripts/event.js?x='+Math.random()*11,getJS);
});
Looks to me like your asynchronous calls are the problem.
You're making two getFile() calls. Since getFile() makes an asynchronous request, the browser will continue through the JavaScript code without waiting for a response (There's a way to force the browser to wait for the response, but I can't think of it right now). So, sometimes when you load the page, #firstName doesn't actually exist until AFTER event.js attempts to make the event binding.
I would suggest that you don't recreate the textbox every time someone clicks the button. Instead, it would be "static" on the page, and your JavaScript would simply check the value and make stylistic changes to show the user that their input does or does not validate.