我一直在尝试创建一个表单,当我们单击具有1到10的相应值的按钮时,所选的数字将写入输入“名称”。代码如下:
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (isNaN(x) || x < 1 || x > 10) {
alert("Number should be between 1 to 10");
return false;
}
}
function click(theid) {
var text = theid.toString();
var val = document.forms["myForm"][text].value;
val = Number(val);
document.forms["myForm"]["fname"].value = val;
}
<!DOCTYPE html>
<html>
<body>
<form name="myForm" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname" id="fname"><input type="submit" value="Submit">
<br><br>
<input type="button" value="1" id="one" name="one" onclick="click('one')">
<input type="button" value="2" id="two" onclick="click('two')">
<input type="button" value="3" id="three" onclick="click('three')">
<input type="button" value="4" id="four" onclick="click('four')">
<input type="button" value="5" id="five" onclick="click('five')">
<input type="button" value="6" id="six" onclick="click('six')">
<input type="button" value="7" id="seven" onclick="click('seven')">
<input type="button" value="8" id="eigth" onclick="click('eigth')">
<input type="button" value="9" id="nine" onclick="click('nine')">
<input type="button" value="10" id="ten" onclick="click('ten')">
</form>
</body>
</html>
单击的数字未写入输入中
试试这个,我将click()的名称改为myFunction()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x=document.forms["myForm"]["fname"].value;
if(isNaN(x) || x<1 || x>10)
{
alert("Number should be between 1 to 10");
return false;
}
}
function myFunction(theid)
{
console.log(theid);
var text=theid.toString();
var val=document.forms["myForm"][text].value;
val = Number(val);
document.forms["myForm"]["fname"].value=val;
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname" id="fname"><input type="submit" value="Submit">
<br><br>
<input type="button" value="1" id="one" name="one" onclick="myFunction('one')">
<input type="button" value="2" id="two" onclick="myFunction('two')">
<input type="button" value="3" id="three" onclick="myFunction('three')">
<input type="button" value="4" id="four" onclick="myFunction('four')">
<input type="button" value="5" id="five" onclick="myFunction('five')">
<input type="button" value="6" id="six" onclick="myFunction('six')">
<input type="button" value="7" id="seven" onclick="myFunction('seven')">
<input type="button" value="8" id="eigth" onclick="myFunction('eigth')">
<input type="button" value="9" id="nine" onclick="myFunction('nine')">
<input type="button" value="10" id="ten" onclick="myFunction('ten')">
</form>
</body>
</html>
</body>
</html>