我一直在努力创建一个HTML网站,我可以在这里输入一个月和一天,并输出一个特定的数字(我工作时的卡号)。
概念如下:
用户输入值和总和。 sumbit按钮激活Javascript函数,该函数获取输入的信息并通过等式运行它以输出所需的数字。输出打印在页面上。
当Javascript尝试理解输入时,问题就出现了。我到处寻找,但我似乎无法找到我正在寻找的问题的答案。
我目前正在学习HTML和Javascript。我知道用PHP做这个是可能的(也更实用),但我开始想知道这个设置是否可行。
这是我的源代码:(详细说明问题的评论)
<!DOCTYPE html>
<html>
<body>
<script>
//This is where the problems are occuring. How do I take the input (Id is "day" and "month" respectively) into numbers that Javascript can use?
int day = document.getElementById("day");
int month = document.getElementById("month");
function myFunction() {
if (day = < 16) {
day == 1
} else() {
day == 0
}
// I want this equation to take the number of the month, and multiply it by two. If it is the earlier half of the month then I would like it to subtract one. Then have it edit the html with the id="demo"
document.getElementById("demo").innerHTML = (month * 2) - day;
}
</script>
<h2> What card number is it? </h2>
Please enter the month and day. <br> <br>
<!-- Is it possible to sumbit this entire form into Javascript or would I have to input one variable (or int) at a time? -->
<form id="md">
Month<br>
<input type="number" id="month" value="4" min="1" max="12"> <br> <br> Day
<br>
<input type="number" id="day" value="18" min="1" max="31"><br><br>
<input type="button" name="submit" value="submit" onclick="myFunction()">
</form>
<br><br>
<p>Your number will appear here.</p>
<p id="demo"> </p>
</body>
</html>
&#13;
答案 0 :(得分:2)
您应该将一个处理程序附加到表单提交,以便您可以运行从表单中获取所需值的函数。请勿尝试在正文正下方的script
标记中进行任何计算 - 表单尚未创建,也尚未填写。
例如:
const demo = document.querySelector('#demo');
document.querySelector('form')
.addEventListener('submit', (e) => {
// Use this line to prevent the form from submitting, which will destroy the current page:
e.preventDefault();
const month = document.querySelector('#month').value;
const day = document.querySelector('#day').value;
// console.log(day + ', ' + month);
demo.textContent = day + ', ' + month;
});
&#13;
<h2> What card number is it? </h2>
Please enter the month and day. <br> <br>
<form id="md">
Month<br>
<input type="number" id="month" value="4" min="1" max="12"> <br> <br> Day
<br>
<input type="number" id="day" value="18" min="1" max="31"><br><br>
<input type="submit">
</form>
<p>Your number will appear here. <span id="demo"> </span></p>
&#13;
如果您可以更改HTML,请将最后一个输入更改为<input type="submit">
- 这样,单击它将提交表单,您可以收听表单提交而不是单击按钮。请注意,如果您这样做,则必须确保使用preventDefault
,否则页面将被替换。
答案 1 :(得分:2)
您有几个语法问题......但主要问题是您没有从输入中获取实际值。您可以在.value
getElementById
执行此操作
<!DOCTYPE html>
<html>
<body>
<script>
//This is where the problems are occuring. How do I take the input (Id is "day" and "month" respectively) into numbers that Javascript can use?
function myFunction() {
var day = document.getElementById("day").value;
var month = document.getElementById("month").value;
if (day <= 16) {
day == 1
} else {
day == 0
}
// I want this equation to take the number of the month, and multiply it by two. If it is the earlier half of the month then I would like it to subtract one. Then have it edit the html with the id="demo"
document.getElementById("demo").innerHTML = (month * 2) - day;
}
</script>
<h2> What card number is it? </h2>
Please enter the month and day. <br> <br>
<!-- Is it possible to sumbit this entire form into Javascript or would I have to input one variable (or int) at a time? -->
<form id="md">
Month<br>
<input type="number" id="month" value="4" min="1" max="12"> <br> <br> Day
<br>
<input type="number" id="day" value="18" min="1" max="31"><br><br>
<input type="button" name="submit" value="submit" onclick="myFunction()">
</form>
<br><br>
<p>Your number will appear here.</p>
<p id="demo"> </p>
</body>
</html>
答案 2 :(得分:1)
可以通过不同方式实现。您可以使用 document.getElementById(“idofelement”)获取表单提交时输入字段的值。值;
function myFunction() {
var day = document.getElementById("day").value;
var mon = document.getElementById("month").value;
if (day <= 16) {
day = 1;
} else {
day = 0;
}
var final = (mon * 2) - day;
// I want this equation to take the number of the month, and multiply it by two. If it is the earlier half of the month then I would like it to subtract one. Then have it edit the html with the id="demo"
document.getElementById("demo").innerHTML = final;
}
Please enter the month and day. <br> <br>
<form id="md">
Month<br>
<input type="number" id="month" value="4" min="1" max="12"> <br> <br> Day
<br>
<input type="number" id="day" value="18" min="1" max="31"><br><br>
<input type="button" value="submit" name="submit" onclick="myFunction()">
</form>
<br><br>
<p>Your number will appear here.</p>
<p id="demo"> </p>