Input types and JavaScript events

<INPUT type =>
<html><body>
<form action="demo_form.asp">
Username: <input type="text" name="usrname"><br>
<input type="submit" value="Submit">
</form></body></html>
<html><body><form>
<input type="button" value="Click me" onclick="msg()">
</form>
<p>The button above activates a JavaScript when it is clicked.</p>
<script>
function msg() {
alert("Hello world!");
}
</script></body></html>
<html><body>
E-mail: <input type="email" name="usremail">
<input type="submit">
</form>
<p><b>Note:</b> type="email" is not supported in Internet Explorer 9 and earlier
versions, or Safari.</p></body></html>
<html><body>
Select a file: <input type="file" name="img">
<input type="submit">
</form></body></html>
<html><body>
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
<p><b>Note:</b> The input type="image" sends the X and Y coordinates of the click
that activated the image button.</p></body></html>
<html> <head>
<title>If - Else Control Structure</title>
</head>
<body> <script language="JavaScript type="text/javascript">
document.write("<h1>Basic Addition I</h1>")
var response = parseInt(prompt("What is 100 + 50?", ""))
if (response == 150)
{ alert("That is correct! 100 + 50 = 150") }
else
{ alert("Wrong! 100 + 50 = 150") }
</script> </body> </html>
<body>
<form>
<input type="button" value="Click Me!" onclick="window.alert('Hi!');" />
</form>
</body
function hi_and_bye() {
window.alert('Hi!');
window.alert('Bye!');
}
Next, add the script tags and the event handler to your HTML code:
<body>
<form>
<input type="button" value="Click Me!" onclick="hi_and_bye();" />
</form>
<script type="text/javascript" src="js_event_01.js"></script>
</body>
<body>
<form>
<input type="button" value="Click Me!" id="say_hi" />
</form>
<script type="text/javascript" src="js_event_01.js"></script>
</body>
document.getElementById("say_hi");
var hi_button = document.getElementById("say_hi");
Now, grab the rest of the code from the JavaScript file (js_event_01.js) and add the new
line of
script to it, as shown here:
function hi_and_bye() {
window.alert('Hi!');
window.alert('Bye!');
}
var hi_button = document.getElementById("say_hi");
hi_button.onclick = hi_and_bye;
There is now also an additional line of code. The last line of code takes the variable
used for the input button element and gives it the onclick event handler by adding it
after
The function and
its statements
The button input element is
accessed via its id (say_hi) and
assigned to a variable (hi_button)
The onclick event handler is used to assign the function
(hi_and_bye) to the onclick event for the button input element
<body>
<form>
<input type="button" value="Do not Click Here"
onclick="window.alert('I told you not to click me!');">
</form>
</body>
<body>
<a href="http://none"
onclick="window.alert('Hey! You clicked me!'); return false;">
Don't Click Me</a>
</body>
<body onload="window.alert('I\'m done loading now!');">
Text for the body of the page...
</body>
When the page has finished loading, viewers will get an alert that tells them it is finished.
window.onload = function() {
window.alert('I\'m done loading now!');
};
<form onsubmit="window.alert('Thank You');">
What's your name?<br />
<input type="text" id="thename" /><br />
<input type="submit" value="Submit Form">
</form>
<body onunload="window.alert('Be sure to come back, OK?');">
Other HTML code goes here...
</body>
<body>
<a href="message.html" id="msg_link">Get Message</a>
<br /><br />

<form>
<input type="text" id="msg_box" />
</form>
<script type="text/javascript" src="textbox_message.js"></script>
</body>
From this little bit of HTML code, you can use JavaScript to make this simple page go
from static to interactive.
<form>
<input type="button" value="Go Searching!" id="btn1" />
</form>
Now, to make a button work like a link, all you need to do is use the location property
with
the onclick event handler. Create an external JavaScript file (save it as button_link.js) and
use
the following code:
var web_page1 = "http://www.yahoo.com";
var b1 = document.getElementById("btn1");
b1.onclick = function() {
window.location = web_page1;
};
Much like the previous script, this grabs the necessary values and then uses an
anonymous
function to execute a JavaScript command. When the viewer clicks the button, the
browser
goes to the new Web page.
<form>
<input type="button" value="Go Searching!" id="btn1" /><br /><br />
<input type="button" value="HTML Help" id="btn2" /><br /><br />
<input type="button" value="JavaScripts" id="btn3" />
</form>
With the extra buttons, add the necessary code and events for each element:
var web_page1 = "http://www.yahoo.com";
var web_page2 = "http://www.pageresource.com";
var web_page3 = "http://www.javascriptcity.com";
};
};
};
This code creates three buttons that link to three different sites. Of course, if you decide
to use
a large number of these, it might be easier to work with arrays. Arrays will be discussed
in

Input types and JavaScript events

Încărcat de

Informații document

Descriere originală:

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Input types and JavaScript events

Încărcat de

Drepturi de autor:

Formate disponibile

<INPUT type =>

<br /><br />

S-ar putea să vă placă și