Cannot hide a element in javascript using onfocus event - javascript

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>

Related

maxLength is not a function

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>

onkeypress does not call function

I need to call a js function everytime a key is pressed in a textbox:
<html>
<script>
function checkValidity() {
alert("Checking...");
}
</script>
<body>
<input type="text" name="username" id="username" onkeypress="checkValidity()">
</body>
</html>
The alert, however, never get displayed. What's wrong with this code?
UPDATE
The script is actually in a separate js file but I'm certain it's declared correctly because if I call checkValidity() from the body's onload I do get the alert.
Actually your markup is right but the function name checkValidity is now an internal keyword for elements
Check here https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity
You can change the name of the function thats all
<html>
<script>
function checkMyValidity() {
alert("Checking...");
}
</script>
<body>
<input type="text" name="username" id="username" onkeypress="checkMyValidity()">
</body>
</html>
checkValidity is Javascript's form validation method. Change the method name. Then it will work.
<html>
<head>
<script>
function checkValid() {
alert("You pressed a key inside the input field");
}
</script>
</head>
<body>
<input type="text" name="username" id="username" onkeypress="checkValid()">
</body>
</html>
I think it is working

Why isn't this onclick JavaScript call working?

HTML
<div id="test"></div>
<input type="button" value="Go" onclick="test()" />
JavaScript
function test() {
alert("Test!");
}
Fiddle
http://jsfiddle.net/MVBrS/11/
Please look at this one, it is about jsfiddle code frames separation:
Inline event handler not working in JSFiddle
Of course, if you were running the same code embedded on plain HTML it works normally, having the alerted popup appearing.
<!DOCTYPE html>
<html>
<head>
<script>
function test() {
alert("Test!");
}
</script>
</head>
<body>
<div id="test"></div>
<input type="button" value="Go" onclick="test()" />
</body>
</html>
when you do
onclick="test()"
as an attribute of the input element, you are setting the result of the call test() (in your case 'null') as the click event handler
you probably want to do this
onclick="test"
instead, which will set the actual 'test' function as the handler,
or even better, follow the following guidelines: unbtrusive javascript or unobtrusive JS (2),.. you get the point ;)

getElementById, radio buttons, and document.write();

Radio buttons and JS suck. Ok now that I got that out of my system here is my problem: I finally got Javascript to acknowledge the radio button's value after reading getElementById not playing nice with Radio Buttons
I can alert the value but document.write(); won't work?
Here is my code:
<html>
<head>
<script type="text/javascript">
function getRadioValue() {
var y=document.getElementById('draftrequirement_2').value;
document.write(y);
return y;
}
window.onload = function() { alert(getRadioValue()); }
</script>
</head>
<body>
<input onchange="checkRadio()" type="radio" name="draftrequirement" value="na" id="draftrequirement_2" />
</body>
</html>
In Firefox 5 and Chrome 12 I see 'na' in both the alert and the document, so the document.write() seems to work in those browsers. The radio input is not present after the window load event, though.
Can I ask you why you are using document.write()? There are many alternatives to manipulating the DOM. From w3schools.com (http://www.w3schools.com/js/js_howto.asp)
Note: Try to avoid using document.write() in real life JavaScript code. The entire HTML page will be overwritten if document.write() is used inside a function, or after the page is loaded. However, document.write() is an easy way to demonstrate JavaScript output in a tutorial.
Do not use document.write(). Ever!
Make your life easier and start using jQuery or similar library for manipulating DOM.
If you need to do it with pure javascript only, this should work:
<html>
<head>
<script type="text/javascript">
function checkRadio() {
var y=document.getElementById('draftrequirement_2').value;
document.getElementById('draftrequirement_2_message').innerHTML = y;
}
</script>
</head>
<body>
<input onchange="checkRadio()" type="radio" name="draftrequirement" value="na" id="draftrequirement_2" />
<div id="draftrequirement_2_message" />
</body>
</html>
<html>
<head>
<script type="text/javascript">
function checkRadio() {
var y=document.getElementById('draftrequirement_2').value;
document.write(y);
return y;
}
</script>
</head>
<body>
<input onchange="checkRadio()" type="radio" name="draftrequirement" value="na" id="draftrequirement_2" />NA
</body>
</html>
Use this it is working

Copy/Paste events for javascript on iOS

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>

Categories

Resources