I've got a simple html and JS script, but it doesn't fire the alert message onchange when I enter 2 in the input number field.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
function myFunction() {
var x = document.getElementById("partysize");
if (x==2) window.alert ("You entered" + x);
}
</script>
</head>
<body bgcolor="#6BD3FF" text="#000000" link="#0000EE" vlink="#551A8B" alink="#FF0000">
<div align="center">
<br> Please enter the party size:
<input type="number" id = "partysize" name="partySize" onchange="myFunction()" >
<br />
<input type="SUBMIT" name="submitButton">
</form>
<br />
</div>
</body>
</html>
ugh, fixed by getting the value of the element:
function myFunction() {
var x = document.getElementById("partysize").value;
if (x==2) window.alert ("You entered" + x);
}
You need to get the value from the input box but in your snippet x is the only dom element. Pass the value to the change handler using this.value. Also parseInt will convert the number value in string to number
function myFunction(x) {
if (parseInt(x, 10) === 2) {
alert("You entered" + x);
}
}
<body bgcolor="#6BD3FF" text="#000000" link="#0000EE" vlink="#551A8B" alink="#FF0000">
<div align="center">
<br> Please enter the party size:
<input type="number" id="partysize" name="partySize" onchange="myFunction(this.value)">
<br/>
<input type="submit" name="submitButton">
<br />
</div>
</body>
Related
My code is below. Trying to create a simple form for an assignment.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Adoption Form</title>
<script>
function getInfo(){
var first =
document.forms["formInfo"]["first"].value;
var last =
document.forms["formInfo"]["last"].value;
var applicantInfo = "My first name is " + first + " My last name is " + last ".";
document.getElementById("info").innerHTML = applicantInfo;
}
</script>
</head>
<body>
<div>
<form id="formInfo" name="formInfo">
<p>My first name is <input name="first" type="text" id="first" title="first"></p>
<p> My last name is <input name="last" type="text" id="last" title="last"></p>
<p><input type="button" value="Send Information" onClick="getInfo()"></p>
</form>
</div>
<div id="info">
</div>
</body>
</html>
Whenever I press the button in the browser, nothing happens. Where am I going wrong?
There are two mistakes first it's onclick with a small c not onClick.
Second you are missing a + after last
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Adoption Form</title>
<script>
function getInfo() {
var first = document.forms["formInfo"]["first"].value;
var last = document.forms["formInfo"]["last"].value;
var applicantInfo =
"My first name is " + first + " My last name is " + last + ".";
document.getElementById("info").innerHTML = applicantInfo;
}
</script>
</head>
<body>
<div>
<form id="formInfo" name="formInfo">
<p>
My first name is
<input name="first" type="text" id="first" title="first" />
</p>
<p>
My last name is
<input name="last" type="text" id="last" title="last" />
</p>
<p>
<input type="button" value="Send Information" onclick="getInfo();" />
</p>
</form>
</div>
<div id="info"></div>
</body>
</html>
This code works, here is the JSFIDDLE
You were simply missing a concatenation operator(+) toward the end of your variable assignment.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Adoption Form</title>
<script>
function getInfo(){
var first =
document.forms["formInfo"]["first"].value;
var last =
document.forms["formInfo"]["last"].value;
var applicantInfo = "My first name is " + first + " My last name is " + last + ".";
document.getElementById("info").innerHTML = applicantInfo;
};
</script>
</head>
<body>
<div>
<form id="formInfo" name="formInfo">
<p>My first name is <input name="first" type="text" id="first" title="first"></p>
<p> My last name is <input name="last" type="text" id="last" title="last"></p>
<p><input type="button" value="Send Information" onClick="getInfo()"></p>
</form>
</div>
<div id="info">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" id="mytext">
<input type="button" onclick="myfuction()" value="click">
<script type="text/javascript">
//the problem is here,why the value is ok?but innerText don't
function myfuction() {
var a = document.getElementById("[mytext][1]").value;
alert(a);
}
</script>
</body>
</html>
I want to enter text in the input box, and I will be prompted by clicking the button.
getElementById works on the ID attribute of the element.
function myfuction() {
var a = document.getElementById("mytext").value;
alert(a);
}
<input type="text" id="mytext">
<input type="button" onclick="myfuction()" value="click">
I'm trying to make a small script that determines whether inputted text is entirely uppercase, entirely lowercase, or neither. Here:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<script>
function caps (p1){
console.log ("yes");
if (p1.toUpperCase() == p1){
alert ("Is uppercase")
}
else if (p1.toLowerCase() == p1){
alert ("Is lowercase")
}
else {
alert ("Is mix of both");
}
}
</script>
<form id="form1" name="form1" method="post" action="">
<p>
<label>Write something<br />
<input type="text" name="numero" id="numero" />
</label>
</p>
<p>
<input onclick="caps(numero)" type="submit" name="button" id="button" value="Submit" />
</p>
</form>
</body>
</html>
However, it doesn't work; the Firefox Web Console insists that "toUpperCase()" is not a valid method. What's happening here?
In your onclick, you call the function like this: caps(numero)
This isn't passing numero as a String. Its passing it as a variable name. An undefined one. .toUpperCase is a method on String, and will not exist on undefined.
Instead, try: caps('numero')
Or, if you're trying to pass the value of your text input:
caps(document.getElementById('numero').value)
Perhaps better yet, build that into your function:
function caps (id) {
var p1 = document.getElementById(id).value
if (p1.toUpperCase() == p1){
alert ("Is uppercase")
}
else if (p1.toLowerCase() == p1){
alert ("Is lowercase")
}
else {
alert ("Is mix of both");
}
}
That way, you can call it like onclick="caps('numero')", passing in the id of the input whose value you want to UpperCase
Try this way, p1 is input element not your input element's value so compare with p1.value
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function caps (p1)
{
console.log (p1); //see here
console.log (p1.value);
if (p1.value.toUpperCase() == p1.value){
alert ("Is uppercase")
}
else if (p1.value.toLowerCase() == p1.value){
alert ("Is lowercase")
}
else {
alert ("Is mix of both");
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<p>
<label>Write something<br />
<input type="text" name="numero" id="numero" />
</label>
</p>
<p>
<input onclick="caps(numero)" type="submit" name="button" id="button" value="Submit" />
</p>
</form>
</body>
</html>
not p1.toUpperCase() == p1, p1 stand for input dom element where id="p1",
don't have touppercase method,only string has this method,so you should use p1.value
document.getElementById(p1) equals to p1,p1 is the id name
All I want to do is disable the button if there's no content in ftemp. If there is, I want the button to enable and check if it is numeric. Then I can send the ftemp to the next page. My html :
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function content()
{
var ftemp = document.getElementById("ftemp");
if (ftemp.value=="")
{
var convert = document.getElementById("convert").disabled=true;
document.getElementById("error").innerHTML = "";
}
else
{
isNumeric()
}
}
function isNumeric()
{
var ftemp = document.getElementById("ftemp");
if (isNaN(ftemp))
{
var convert = document.getElementById("convert").disabled=true;
document.getElementById("error").innerHTML = "Enter only numbers";
}
else
{
var convert = document.getElementById("convert").disabled=false;
document.getElementById("error").innerHTML = "";
}
}
</script>
</head>
<body onload="content()">
<form method="get" action="celsius">
<p>
<label>
Enter a temperature in Fahrenheit:
</label>
</p>
<p>
<input required id="ftemp" title="Enter only numbers!" size="3"
maxlength="3" onkeyup="content()"/>
<button id="convert" name="convert">Convert to Celsius</button>
</p>
<p id="error" name="error">
</p>
</form>
</body>
</html>
Inside isNumeric():
You are checking: isNaN(ftemp) where ftemp is a DOM element so it cannot be a number. Change to isNaN(parseInt(ftemp.value, 10)).
You have error here:
if (isNaN(ftemp))
Change it to:
if (isNaN(ftemp.value))
The ftemp is a DOM Object. You need to pass the value here.
Fiddle: http://jsbin.com/ocibuc/2
This code fails to insert text into the textarea - see html below. I can't change the html - because this snippet is mimicing a real web page. I just need to insert text into a textarea.
It doesn't work in Chrome or IE9.
Any ideas?
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<script type="text/javascript">
function insert_text() {
//enumerate div sections and find where id = WIN_0_4
var div = window.document.getElementById("WIN_0_4");
if(div !== null)
{
var txtbox = div.getElementsByTagName('textarea');
if(txtbox !== null)
txtbox.value = document.frm.texttoinsert.value;
}
}
</script>
<form name="frm">
<input type="button" id="clicker" value="Click me" />
<input type="button" value="insert" id="inserter" onclick="insert_text();" />
<input type="text" name="texttoinsert" />
</form>
<div id="WIN_0_536870917" arid=536870917 artype="View" ardbn="View Field2" class="arfid536870917 ardbnViewField2" style="color:#0000FF">
some text here
</div>
<div id="WIN_0_4" arid=4 artype="Char" ardbn="Assigned To">
<label id="label4" class="label f6">Assigned To</label>
<textarea class="text sr " wrap="off" id="arid_WIN_0_4" cols="20" maxlen=254 arautocak=0 arautoctt=400 rows=1></textarea>
</div>
</body>
</html>
Replace
var txtbox = div.getElementsByTagName('textarea');
with
var txtbox = div.getElementsByTagName('textarea')[0];
Or better :
var txtbox = document.getElementById('arid_WIN_0_4');
As the name implies, getElementsByTagName returns more than one element.
txtbox[0].value = document.frm.texttoinsert.value;