JavaScript firstChild.nodeValue 不起作用

问题描述 投票：0回答：4

在我的课程中，如果用户输入了错误的值，我们使用firstChild.nodeValue 来显示文本。但是，我无法让其他两个字段显示错误消息，而只能显示第一个字段。我究竟做错了什么？当我在代码片段中运行它时，它说 nodeValue 为空。我通过跨度显示错误消息，并且它们正在被firstChild.nodeValue使用。

var $ = function (id) {
    return document.getElementById(id);
}
var calculateClick = function () {
    var investment = parseInt( $("investment").value);
    var rate = parseFloat( $("rate").value);
    var years = parseInt($("years").value);

    //var amount = interest * rate * years;
    if (investment==="" || investment < 100 || investment > 100000){ 
    	$("investment_error").firstChild.nodeValue="Must be an integer from 100 - 100,000";
    } 
    
    
    else if (rate ==="" || rate <0.1 || rate >12){
    	$("rate_error").firstChild.nodeValue="Must be a value from .1 - 12";
    } 
    

    else if (years ==="" || years <1 || years > 50){
    	$("years_error").firstChild.nodeValue="Must be an integer from 1 - 50";
    } 

   	var nt = 4*years;
   	var amount = investment * (1 + (rate/4)) ** nt;

    $("future_value").value=amount.toFixed(2);
    
}
var clear_fields = function (){
	$("investment").value="";
	$("rate").value="";
	$("years").value="";
	$("future_value").value="";
}
window.onload = function () {
    $("calculate").onclick = calculateClick;
    $("calculate").ondblclick=clear_fields;
    $("investment").focus();
}
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: white;
    margin: 0 auto;
    width: 48%;
    padding: 0 1em .5em;    
    border: 3px solid blue;
}
h1 {
	margin: .5em 0;
    text-align: center;
}
label {
	float: left;
    width: 10em;
    text-align: right;
    padding-bottom: .5em;
}
input {
    margin-left: 1em;
    margin-bottom: .5em;
}
span {
    color: blue;
}
<!DOCTYPE html>
<html>
	<head>
		<title>Future Value Calculator</title>
    	<link rel="stylesheet" href="future_value.css">
    	<script src="future_value.js"></script>
</head>

<body>
	<main>
        <h1 id="heading">Future Value Calculator</h1>
        
        <label for="investment">Investment Amount:</label>
        <input type="text" id="investment">
        <span id="investment_error"> </span><br>
        
        <label for="rate">Annual Interest Rate:</label>
        <input type="text" id="rate">
        <span id="rate_error"></span><br>
        
        <label for="years">Number of Years:</label>
        <input type="text" id="years">
        <span id="years_error"></span><br>
        
        <label for="future_value">Future Value:</label>
        <input type="text" id="future_value" disabled="disabled"><br>
        
        <label>&nbsp;</label>
        <input  type="button" id="calculate" value="Calculate"><br>
    </main>
</body>
</html>

javascript html
4个回答
0
投票

它在第一个跨度上工作，因为跨度标签之间有空格：

有空间

<span id="investment_error"> </span>

无

<span id="rate_error"></span>

无论如何，您应该使用 innerHTML 来代替。

第一个孩子很好，如果你已经在像这样的 html 标签中有一个孩子了

<div>
    <p id="i_am_div_first_child"> first child</p>
</div>

如果有帮助，请点击正确答案。

0
投票

那么有什么区别呢？一个简单的测试就会告诉你原因。

console.log("1:", document.querySelector("#s1").firstChild)
console.log("2:", document.querySelector("#s2").firstChild)
<span id="s1"> </span>
<span id="s2"></span>

其中有一个空格，其他的没有 第一个有空格的有第一个Child，其他的没有。

你应该做什么？ 我只设置范围的textContent 或innerHTML，而不设置nodeValue。

您的代码的另一个问题是您有

var rate = parseFloat( $("rate").value);

和

if ( rate==="")

自从 parseFloat 将返回 NaN 以来，空字符串检查就不会发生为真。

0
投票

$("rate_error").firstChild
返回 
null
，因为它没有子级（甚至没有空格），因此没有 
nodeValue
属性。

您可以使用 

innerHTML
而不是 
firstChild.nodeValue
。

此外，您也不需要 

else
，只需立即告诉用户他们需要修复的所有问题即可。

var $ = function(id) {
  return document.getElementById(id);
}
var calculateClick = function() {
  var investment = parseInt($("investment").value);
  var rate = parseFloat($("rate").value);
  var years = parseInt($("years").value);

  //var amount = interest * rate * years;
  if (investment === "" || investment < 100 || investment > 100000) {
    $("investment_error").innerHTML = "Must be an integer from 100 - 100,000";
  }

  if (rate === "" || rate < 0.1 || rate > 12) {
    $("rate_error").innerHTML = "Must be a value from .1 - 12";
  }

  if (years === "" || years < 1 || years > 50) {
    $("years_error").innerHTML = "Must be an integer from 1 - 50";
  }

  var nt = 4 * years;
  var amount = investment * (1 + (rate / 4)) ** nt;

  $("future_value").value = amount.toFixed(2);

}
var clear_fields = function() {
  $("investment").value = "";
  $("rate").value = "";
  $("years").value = "";
  $("future_value").value = "";
}
window.onload = function() {
  $("calculate").onclick = calculateClick;
  $("calculate").ondblclick = clear_fields;
  $("investment").focus();
}
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: white;
  margin: 0 auto;
  width: 48 %;
  padding: 0 1em .5em;
  border: 3px solid blue;
}

h1 {
  margin: .5em 0;
  text-align: center;
}

label {
  float: left;
  width: 10em;
  text-align: right;
  padding-bottom: .5em;
}

input {
  margin-left: 1em;
  margin-bottom: .5em;
}

span {
  color: blue;
}
<!DOCTYPE html>
<html>

<head>
  <title>Future Value Calculator</title>
  <link rel="stylesheet" href="future_value.css">
  <script src="future_value.js"></script>
</head>

<body>
  <main>
    <h1 id="heading">Future Value Calculator</h1>

    <label for="investment">Investment Amount:</label>
    <input type="text" id="investment">
    <span id="investment_error"> </span><br>

    <label for="rate">Annual Interest Rate:</label>
    <input type="text" id="rate">
    <span id="rate_error"></span><br>

    <label for="years">Number of Years:</label>
    <input type="text" id="years">
    <span id="years_error"></span><br>

    <label for="future_value">Future Value:</label>
    <input type="text" id="future_value" disabled="disabled"><br>

    <label>&nbsp;</label>
    <input type="button" id="calculate" value="Calculate"><br>
  </main>
</body>

</html>

0
投票

var $ = function (id) {
    return document.getElementById(id);
}
var calculateClick = function () {
    var investment = parseInt( $("investment").value);
    var rate = parseFloat( $("rate").value);
    var years = parseInt($("years").value);

    //var amount = interest * rate * years;
    if (investment==="" || investment < 100 || investment > 100000){ 
        $("investment_error").firstChild.nodeValue="Must be an integer from 100 - 100,000";
    } 
    
    
    else if (rate ==="" || rate <0.1 || rate >12){
        $("rate_error").firstChild.nodeValue="Must be a value from .1 - 12";
    } 
    

    else if (years ==="" || years <1 || years > 50){
        $("years_error").firstChild.nodeValue="Must be an integer from 1 - 50";
    } 

    var nt = 4*years;
    var amount = investment * (1 + (rate/4)) ** nt;

    $("future_value").value=amount.toFixed(2);
    
}
var clear_fields = function (){
    $("investment").value="";
    $("rate").value="";
    $("years").value="";
    $("future_value").value="";
}
window.onload = function () {
    $("calculate").onclick = calculateClick;
    $("calculate").ondblclick=clear_fields;
    $("investment").focus();
}
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: white;
    margin: 0 auto;
    width: 48%;
    padding: 0 1em .5em;    
    border: 3px solid blue;
}
h1 {
    margin: .5em 0;
    text-align: center;
}
label {
    float: left;
    width: 10em;
    text-align: right;
    padding-bottom: .5em;
}
input {
    margin-left: 1em;
    margin-bottom: .5em;
}
span {
    color: blue;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Future Value Calculator</title>
        <link rel="stylesheet" href="future_value.css">
        <script src="future_value.js"></script>
</head>

<body>
    <main>
        <h1 id="heading">Future Value Calculator</h1>
        
        <label for="investment">Investment Amount:</label>
        <input type="text" id="investment">
        <span id="investment_error"> </span><br>
        
        <label for="rate">Annual Interest Rate:</label>
        <input type="text" id="rate">
        <span id="rate_error"></span><br>
        
        <label for="years">Number of Years:</label>
        <input type="text" id="years">
        <span id="years_error"></span><br>
        
        <label for="future_value">Future Value:</label>
        <input type="text" id="future_value" disabled="disabled"><br>
        
        <label>&nbsp;</label>
        <input  type="button" id="calculate" value="Calculate"><br>
    </main>
</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.