Question

很抱歉，如果这个问题在某处得到解答，但我无法找到我的问题附近的任何内容或其他帖子中的答案。
我正在尝试创建一个博客，但我还在学习，所以我使用我的索引页进行实验。无论如何，我在我的网页上有一个部分，你得到一个输出取决于用户的输入，我无法从网页获得JavaScript的接收输入。

请注意我只在笔记本电脑上的Microsoft Edge和手机上的Firefox上尝试过此操作，但我不认为这是我的浏览器。

另外，我认为它影响了我的计算器，但这不适用于这篇文章您可以随意在答案中编辑我的代码，但最好解释代码的编辑无论如何，请提前感谢您提供的任何帮助！
注意我没有找到任何发布回答我的问题，所以 <在 之前，请 链接关闭此帖子：）
，空白空间 em> future 代码和我不 a pro in case 某人没有数字 out 。

function age(){ var age=document.getElementById('age'); if(age<18){ document.getElementById('Age').innerHTML="Underage"; alert("This is your age: "+age); } else{document.getElementById('Age').innerHTML="Of age"; alert("This is your age: "+age); } } function calculate(){ var num1=document.getElementById('firstNumber'); var num2=document.getElementById('secondNumber'); var sum=num1+num2; document.getElementById('Age').innerHTML=sum; }

.page{background-color:#ce6efa;} #firstHeading{font-family:Nyala, "Palatino Linotype";} label{color:#5728ad;} #Age{color:#243bd4;}

<!DOCTYPE html>  <html> <meta charset="UTF-16"> <head> <link rel="stylesheet" href="mainpage.css"> <title>Sandi Vujaković</title> </head> <body class="page"> <h2 id="firstHeading">My life</h2> <label>First number</label> <input type="number" id="fistNumber" name="Number a"> <label>Second number</label> <input type="number" id="secondNumber" name="Number b"> <input type="submit" onclick="calculate()" value="Calculate"><br/> <p id="calc"></p> <label>Age</label> <input type="number" id="age" name="age"> <input type="submit" onclick="age()" value="Check"><br/> <p id="Age"></p> <script src="mainpage.js"></script> </body> </html>

如果我使用alert()，我会得到奇怪的结果。就像在代码中一样，输出是

This is your age: [object HTMLInputElement]。

当我将其更改为：

var age2=++age; alert("This is your age: "+age2);

然后输出从[object HTMLInputElement]变为NaN。

说明

Answer 1

好？

起初我发现了一些不一致的地方：

1-“var age = document.getElementById（'age'）”无法报告所需的属性。在你的情况下：“价值”。在“计算”功能中，我在前两行遇到了同样的问题

2-“var num1 = document.getElementById（'fistNumber'）”元素ID错误。我更正了“firstNumber”

3-在比较“计算”函数中捕获的年龄和总和的两个时刻，我使用了“parseInt”函数来防止变量被视为字符串并因此连接起来。 / p>

我希望我有所帮助。

function age(){
	var age=document.getElementById('age').value;
	if(parseInt(age)<18){
		document.getElementById('Age').innerHTML="Underage";
		alert("This is your age: "+age);
	}
	else{alert("This is your age: "+age);
	}
}
function calculate(){
	var num1=document.getElementById('firstNumber').value;
	var num2=document.getElementById('secondNumber').value;
	var sum=parseInt(num1)+parseInt(num2);
	document.getElementById('Age').innerHTML=sum;
}

.page{background-color:#ce6efa;}
#firstHeading{font-family:Nyala, "Palatino Linotype";}
label{color:#5728ad;}
#Age{color:#243bd4;}

<!DOCTYPE html>
<!--Work on this blog began on the 24th of June 2017-->
<html>
<meta charset="UTF-16">
<head>
<link rel="stylesheet" href="mainpage.css">
<title>Sandi Vujaković</title>
</head>
<body class="page">
<h2 id="firstHeading">My life</h2>
<label>First number</label>
<input type="number" id="firstNumber" name="Number a">
<label>Second number</label>
<input type="number" id="secondNumber" name="Number b">
<input type="submit" onclick="calculate()" value="Calculate"><br/>
<p id="calc"></p>
<label>Age</label>
<input type="number" id="age" name="age">
<input type="submit" onclick="age()" value="Check"><br/>
<p id="Age"></p>





<script src="mainpage.js"></script>
</body>
</html>

Answer 2

您需要获得“价值”＆＃39;属性：document.getElementById（＆＃39; age＆＃39;）。value;

此外，您的名字输入ID拼写错误。＆＃34; fistNumber＆＃34;

＆＃13;

function age() {
  var age = document.getElementById('age').value;
  if(age == "" || age == null) {
    alert("Please enter an age!");
    return;
  }
  if (parseInt(age) < 18) {
    document.getElementById('alert').innerHTML = "Underage";
    alert("This is your age: " + age);
  } else {
    document.getElementById('alert').innerHTML = "Of Age";
    alert("This is your age: " + age);
  }
}

function calculate() {
  var num1 = document.getElementById('firstNumber').value;
  var num2 = document.getElementById('secondNumber').value;
  var sum = parseInt(num1) + parseInt(num2);
  document.getElementById('alert').innerHTML = sum;
}

＆＃13;

.page {
  background-color: #ce6efa;
}

#firstHeading {
  font-family: Nyala, "Palatino Linotype";
}

label {
  color: #5728ad;
}

#Age {
  color: #243bd4;
}

＆＃13;

<!DOCTYPE html>
<!--Work on this blog began on the 24th of June 2017-->
<html>
<meta charset="UTF-16">

<head>
  <link rel="stylesheet" href="mainpage.css">
  <title>Sandi Vujaković</title>
</head>

<body class="page">
  <h2 id="firstHeading">My life</h2>
  <label>First number</label>
  <input type="number" id="firstNumber" name="Number a">
  <label>Second number</label>
  <input type="number" id="secondNumber" name="Number b">
  <input type="submit" onclick="calculate()" value="Calculate"><br/>
  <p id="calc"></p>
  <label>Age</label>
  <input type="number" id="age" name="age">
  <input type="submit" onclick="age()" value="Check"><br/>
  <p id="alert"></p>





  <script src="mainpage.js"></script>
</body>

</html>

＆＃13;

Answer 3

以下是我所做的更改：

首先，使用您通过id获取的dom元素属性的value。
然后更正HTML中firstNumber的拼写。您输错了fistNumber。
在比较(x<18)函数中的age之前，必须使用parseInt函数将字符串转换为整数。

function age(){
	var age=document.getElementById('age').value;
        age = parseInt(age);
	if(age<18){
		document.getElementById('Age').innerHTML="Underage";
		alert("This is your age: "+age);
	}
	else{alert("This is your age: "+age);
	}
}
function calculate(){
	var num1=document.getElementById('firstNumber').value;
	var num2=document.getElementById('secondNumber').value;
	var sum=num1+num2;
	document.getElementById('Age').innerHTML=sum;
}

.page{background-color:#ce6efa;}
#firstHeading{font-family:Nyala, "Palatino Linotype";}
label{color:#5728ad;}
#Age{color:#243bd4;}

<!DOCTYPE html>
<!--Work on this blog began on the 24th of June 2017-->
<html>
<meta charset="UTF-16">
<head>
<link rel="stylesheet" href="mainpage.css">
<title>Sandi Vujaković</title>
</head>
<body class="page">
<h2 id="firstHeading">My life</h2>
<label>First number</label>
<input type="number" id="firstNumber" name="Number a">
<label>Second number</label>
<input type="number" id="secondNumber" name="Number b">
<input type="submit" onclick="calculate()" value="Calculate"><br/>
<p id="calc"></p>
<label>Age</label>
<input type="number" id="age" name="age">
<input type="submit" onclick="age()" value="Check"><br/>
<p id="Age"></p>





<script src="mainpage.js"></script>
</body>
</html>

HTML用户输入的JavaScript问题

3 个答案: