I have a problem with an html page
here a simplified version of the page
<html>
<head>
<script type="text/javascript">
function maxLength()
{
console.log('maxLength');
}
</script>
</head>
<body>
<input type"text" onblur="maxLength()">
</body>
</html>
on onblur event I receive this error
Uncaught TypeError: maxLength is not a function
but if i call the function from console it works without errors and print 'maxLength'
Why?
The code there runs in the context of the input, which has defined maxLength.
Better developer tools would make it clearer:
maxLength is not a function at HTMLInputElement.onblur
Rename your function to something else or use a different way of attaching the event listener.
If you rename the function to something else it should work fine for you. The explanation is aptly given with Alex already. Example:
<html>
<head>
<script type="text/javascript">
function maximumLength()
{
console.log('maxLength');
}
</script>
</head>
<body>
<input type"text" onblur="maximumLength()">
</body>
</html>
Related
I am slightly baffled by this one... for some reason the newLoaded() function is apparently not defined and as per the console output I get this: Uncaught ReferenceError: newLoaded is not defined at onload yet it's literally on the same page (not even loaded via external resources)
<head>
...
<script language="text/javascript">
function newLoaded() {
loaded();
}
</script>
</head>
<body onLoad="newLoaded();" class="page page-id-105 page-template page-template-page-fullwidth page-template-page-fullwidth-php cherry-fixed-layout" style="height: 100%;margin:0px;padding:0px">
...
What i found out was the language="text/javascript" is deprecated. Either remove it or use type=""
I have tried following code and seems to be working good
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function newLoaded() {
//loaded();
alert();
}
</script>
</head>
<body onload="newLoaded()">
</body>
</html>
also if there is any load() function whats not defined, the rest can't be triggered.
I think you might have a typo it should be onload not onLoad
EDIT: it works on both cases but the standard one all lowercase
when i trying to hide the element div while click on text box using javascript.but it can't.what is the error on my program .anyone suggest me a good one
<html>
<head>
<script>
function clear()
{
alert("hi");
document.getElementById("mails").style.display="none";
}
</script>
</head>
<body>
<input type="text" onfocus="clear();" />
<div id="mails">hii</div>
</body>
</html>
Instead of using function name as clear(), please use any other name.
clear method refers to obsolete document.clear() method so it does not call clear method written by you.
According to HTML5 Specification, clear() method must do nothing.
IT's very easy to hide elements if you use jQuery. This way, all you need to do is:
$('#mails').hide();
If you prefer using DOM, then you can try this:
<html>
<head>
<script>
function hideit()
{
alert("hi");
document.getElementById("mails").style.display="none";
}
</script>
</head>
<body>
<input type="text" onClick="hideit()" />
<div id="mails">hii</div>
</body>
</html>
Though clear is not a keyword but it seems some browser still supports document.clear & that may be stopping the clear function here . You can change the function name and try
function myF() {
document.getElementById("mails").style.display = "none";
}
<input type="text" onfocus="myF();" />
<div id="mails">hii</div>
I am to late but nevertheless I can agree brk. The clear() is blocked by a native function.
<html>
<head>
<script>
function clearFunction()
{
console.log("onfocus called");
document.getElementById("mails").style.display="none";
}
</script>
</head>
<body>
<input type="text" onfocus="clearFunction();" />
<div id="mails">hii</div>
</body>
</html>
I'm trying to figure out why my function $ is not displaying the location of my link:
<html>
<head>
<title>Link Test</title>
</head>
<body>
<a id="mylink" href="hxxp://mysite.com">Click me</a><br>
<script>
$('mylink').href
function $(id)
{
return document.getElementById(id)
}
</script>
</body>
</html>
here is your code modified to output the href value in three different ways, pick which ever you like.
<html>
<head>
<title>Link Test</title>
</head>
<body>
<a id="mylink" href="hxxp://mysite.com">Click me</a><br>
<span id="out"></span>
<script>
console.log($('mylink').href);
document.getElementById('out').innerHTML=$('mylink').href;
alert($('mylink').href);
function $(id)
{
return document.getElementById(id)
}
</script>
</body>
</html>
however I am pretty sure that's not your intent. I am not sure why you are using $ as your function name, nor why are you trying to output the href. Your intent is not clear, but I have a feeling you are not approaching things correctly.
You aren't doing anything with the href property.
Your code is equivalent to:
<script>
"hxxp://mysite.com";
</script>
You need to pass it to a function that will display it (such as console.log or alert).
I personally don't see anything wrong with your code... Though it may not be perfect and fit all the standards, it seems fine to me. If you just want to output it or something, because it isn't doing anything now, use the following code:
document.write("Link Address: " + $('mylink').href)
Here is an example.
It appears that oncopy and onpaste do not work with iOS devices that support copy and paste now. Is there another means to bind to these events in javascript?
You didn't attached any code with your question, so I can't tell what was the actual issue.
Probably the issue is with your code.
I used the following html code and it is working perfectly. Please check with this:
<html>
<head>
<script type="text/javascript">
function read()
{
var name = document.getElementById('p').value;
alert('Hi: '+name);
}
function copy()
{
alert('Copy');
}
function paste()
{
alert('Paste');
}
</script>
</head>
<body oncopy='copy();' onpaste='paste();'>
<form>
<input type="text" name='m' id='p'/>
<input type="button" value="Submit" onclick='read();'/>
</form>
</body>
</html>
So I have a very simple code with form and one button
with jQuery I want to bind some actions when user clicks on that button, but some reason it's not working
Here is the code
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<script>
$('#jallerysubmit').bind('click', function() {
alert('asd');
})
</script>
<form>
<input type="checkbox" name="box1">box1<br>
<input type="checkbox" name="box1">box2<br>
<input type="button" id="jallerysubmit" value="Proved">
</form>
</body>
</html>
please suggest what's wrong with this code as it does not work, even it does not produce any error
You need to wrap it in a document ready handler.
<script>
$(function() {
$('#jallerysubmit').bind('click', function() {
alert('asd');
});
});
</script>
Docs: http://api.jquery.com/ready/
The JavaScript code will be executed before the DOM is loaded, so the element with ID jallerysubmit cannot be found (it does not exists yet).
#sje397 described a very common way (at least when using jQuery) how to solve this. Another way is to put the script at the end of the document:
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<form>
<input type="checkbox" name="box1">box1<br>
<input type="checkbox" name="box1">box2<br>
<input type="button" id="jallerysubmit" value="Proved">
</form>
<script>
$('#jallerysubmit').bind('click', function() {
alert('asd');
});
</script>
</body>
</html>
Your code attaching the handler is being executed before the element exists in the DOM, therefore the selector returns nothing and the handler is not applied. Put the code inside a document ready handler and it should work. You could also simplify by using the click shortcut.
<script>
$(function() {
$('#jallerysubmit').click(function() {
alert('asd');
});
});
</script>
Include an alert("hello"); right after to make sure the jQuery is working right. Then add a return false to the end of your submit handle to make sure your page doesnt reload when the button is clicked, also use document.ready. See code below
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
alert("hello");
$('#jallerysubmit').bind('click', function() {
alert('asd');
return false;
});
});
</script>
<form>
<input type="checkbox" name="box1">box1<br>
<input type="checkbox" name="box1">box2<br>
<input type="button" id="jallerysubmit" value="Proved">
</form>
</body>
</html>
Best practice is using an external .js file, example script.js:
$(document).ready(function() {
yourFunction();
});
function yourFunction() {
$('#jallerysubmit').click(function() {
alert('asd');
});
}
and import it in your html file in the tag head:
<script type="text/javascript" src="script.js"></script>
Always use jquery function within
(document).ready(function(){//ur jquery codes});
or
$().ready(function(){//ur jquery codes});
or
$.noConflict();
jQuery(document).ready(function($){//ur codes});
Once DOM of page is loaded above ready function is initiated. so i recommend jquery lovers to write their magic codes always within this code