Although I know a lot about these languages now such as arrays and functions, I'm having a basic problem to getting this JavaScript to run, here's the code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="submit" value="submit" onclick="click()" />
<script>
function click() {
alert("hey");
}
</script>
</body>
</html>
You're running into this problem: javascript function name cannot set as click?
You can fix this by changing the function name to something else like function myClick
<head>
</head>
<body>
<input type="submit" value="submit" onclick="myClick()" />
<script>
function myClick() {
alert("hey");
}
</script>
</body>
</html>
yes,like the comment above. you should use a different name instead of click()
function submit() {
alert("hey"); }
<html>
<head>
</head>
<body>
<input type="submit" value="submit" onclick="submit()" />
</body>
</html>
Related
In the given code , I am trying to print the message but after taking input its not printing any message.
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
</head>
<body>
<form onsubmit="return Ak()">
<input type="text" name="abinash" placeholder="abinash" required id="q"><br><br>
<input type="submit" name="submit" value="submit">
<div id="w"></div>
</form>
<script type="text/javascript">
function Ak()
{
var y=document.getElementById("q").value;
document.getElementById("w").innerHTML="You have typed this password"+y;
}
</script>
</body>
</html>
Pressing the submit button will refresh the page.
event.preventDefault(); use this keyword.
<script type="text/javascript">
function Ak()
{
var y=document.getElementById("q").value;
document.getElementById("w").innerHTML="You have typed this password"+y;
event.preventDefault();
}
</script>
It was working, but after submitting form, all of content disappeared. You need to add event.preventDefault(); to onsubmit attribute of form:
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
</head>
<body>
<form onsubmit="event.preventDefault(); return Ak()">
<input type="text" name="abinash" placeholder="abinash" required id="q"><br><br>
<input type="submit" name="submit" value="submit">
<div id="w"></div>
</form>
<script type="text/javascript">
function Ak()
{
var y=document.getElementById("q").value;
document.getElementById("w").innerHTML="You have typed this password"+y;
}
</script>
</body>
</html>
event.preventDefault()
It is working, it's just that when you click that submit button the page reloads. I tried it out, and you can fix it by adding e.preventDefault(); to your function, and put (e) as the arg in the function, like so:
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
</head>
<body>
<form onsubmit="event.preventDefault(); return Ak()">
<input type="text" name="abinash" placeholder="abinash" required id="q"><br><br>
<input type="submit" name="submit" value="submit">
<div id="w"></div>
</form>
<script type="text/javascript">
function Ak()
{
var y=document.getElementById("q").value;
document.getElementById("w").innerHTML="You have typed this password: "+y;
}
</script>
</body>
</html>
Your code works, but the message will disappear because the form is successfully submitted. If you want it to stay on the screen, just return false from the Ak() function:
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
</head>
<body>
<form onsubmit="return Ak()">
<input type="text" name="abinash" placeholder="abinash" required id="q"><br><br>
<input type="submit" name="submit" value="submit">
<div id="w"></div>
</form>
<script type="text/javascript">
function Ak()
{
var y=document.getElementById("q").value;
document.getElementById("w").innerHTML="You have typed this password"+y;
return false;
}
</script>
</body>
</html>
I was asked to develop a web page without a mouse.
The keyboard cursor must be in the input area(example: <input id="input-label" type="text">) immediately when the page is changed.
I tried,
document.querySelector("#input-area").focus();
and
document.querySelector("#input-area").select();
It works with buttons, but does not work in DOMContentLoaded.
document.addEventListener("DOMContentLoaded", function(){
document.querySelector("#input-area").select();
});
How can I solve it?
try this, call it when dom is ready
$(document).ready(function () {
$("#input-area").focus();
});
OR
<input id="input-area" autofocus="autofocus" />
OR
$(function() {
$("#input-area").focus();
});
Try this code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$('#myAnchor').click(function() {
$('#mustfocus').focus();
});
});
</script>
</head>
<body>
<input type="button" id="myAnchor" value="Get focus">
<input type="text" id="mustfocus"/>
</body>
</html>
How about this one which triggers only during DOM is ready:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$('#mustfocus').focus();
});
</script>
</head>
<body>
<input type="button" id="myAnchor" value="Get focus">
<input type="text" id="mustfocus"/>
</body>
</html>
I am trying to use ajax but it is not working when I clicks the button it does not show the alert box on browser.
<html>
<head>
<title>Ajax</title>
<script scr="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
Name: <input type="text" id="data">
<input type="submit" id="sub" value="save">
<script>
$(document).ready(function () {
$('#sub').click(function () {
alert('ok');
});
});
</script>
</body>
</html>
Please try the below code
<html>
<head>
<title>Ajax</title>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$('#sub').click(function(){
alert('ok');
});
});
</script>
</head>
<body>
Name: <input type="text" id="data" >
<input type="submit" id="sub" value="save">
</body>
</html>
1. problem with the jquery path
2. always put the scripts in the head section
please look at the following sample code:
<html>
<head>
<script type="text/javascript">
function myfun()
{
alert('hi');
}
</script>
</head>
<body>
<h1> Hello </h1>
<input type="button" value="MyButton" onClick="myfun()"/>
</body>
</html>
When I run this using php, and when I click on the button, the alert box doesn't come up. However, if I write onclick="alert(hi')" it works fine. What might be the reason?
<html>
<body>
<h1> Hello </h1>
<input type="button" value="MyButton" onClick="alert('hi')"/>
</body>
</html>
Missing a ' in your code...
I just started learning JavaScript and am wondering why this simple snippet hangs when I click on the "Call function" button. What am I missing?
<html>
<head>
<script type="text/javascript">
function myfunction()
{
document.write("hello");
}
</script>
</head>
<body>
<form>
<input type="button"
onclick="myfunction()"
value="Call function">
</form>
</body>
</html>
You need to write inside an element or give an element a value, or you should use document write like that :
<html>
<head>
<script type="text/javascript">
function myfunction()
{
document.getElementById("lblMessage").innerText = "hello";
document.getElementById("txtMessage").value = "hello";
//document.write("hello");
}
</script>
</head>
<body>
<form>
<script type="text/javascript">
document.write("This is written while page processed by browser !<br />");
</script>
<input type="text" id="txtMessage" /><br />
<span id="lblMessage"></span><br />
<input type="button"
onclick="myfunction()"
value="Call function">
</form>
</body>
</html>
If you simply want to see your button doing something then try:
alert("Hello");
instead of the document.write.
Where do you expect the function to output its "hello"? Right into the button's source code? That makes no sense. The browser is confused and hangs.
Document.write doesn't magically insert something at the end of your document. It writes its stuff out right there where it is called.
Not too sure what you mean by "hang"... Try this out... The alerts can be removed, but will inform you of where it is at in execution...
<html>
<head>
<script type="text/javascript">
function myFunction() {
//for debugging
alert('Made it into function');
document.getElementById('MyOutputDiv').innerHTML = 'Word To Your Mom...';
//for debugging
alert('function complete');
}
</script>
</head>
<body>
<input type='button' onclick='myFunction();' value='Call Function'>
<br>
<div id='MyOutputDiv'></div>
</body>
</html>
document.write, but where? You have to specify this.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello</title>
</head>
<body>
<pre><script type="text/javascript">
function myfunction() {
d = document.getElementById('hello');
d.style.display = "block";
d = document.getElementById('callme');
d.style.display = "none";
}
</script>
</pre>
<div id="hello" style="display:none">
Hello
</div>
<div id="callme">
<input type="button"
onclick="myfunction()"
value="Call function">
</input>
</div>
</body>
</html>
I can't explain the "hang" but please take a look at this page for a primer on document.write: http://javascript.about.com/library/blwrite.htm I would also like to second that you probably want to write to a specific element in the page rather than just overwriting the entire page.