Question

我正在尝试完成一个系统，通过该系统，书店可以输入当天出售的5本书的样本及其价格。然后，这些值将显示在页面上。我已经设法了，现在希望增加总价。我已经尝试了堆栈溢出和其他地方提到的所有方法来获得价格数组的sume但是我要么输入最后一个价格，要么当我试图得到总数时“NaN”。请帮忙！！！这是我的代码

document.addEventListener("DOMContentLoaded", function() {
  enterBooks()
}); // Event listener - When page loads, call enterBooks function

function enterBooks() { // enterBooks function
  
  var books = []; // Defines books variable as an array
  
  for (var i = 0; i < 5; i++) { // for loop to loop 5 times
    
    books.push("<li>" + prompt("Enter a book") + "</li>"); // PUSH adds a new item to the array in the form of a prompt with <li> tags either side of each.

    var price = []; // Defines price variable as an array
    
    for (var p = 0; p < 1; p++) { // for loop to loop 1 time
      
      price.push("<li>" + "£" + parseInt(prompt("Enter the price")) + "</li>"); // Once again PUSH adds a new item to the array in the form of a prompt with <li> tags either side of each. This then displays next to each book.

    }
    document.getElementById("displayPrice").innerHTML += (price.join(""));
    document.getElementById("displayBooks").innerHTML = (books.join(""));
  }
  // --------- This is the part i cannot seem to get -----------
  var total = 0;

  for (var t = 0; t < price.length; t++) {
    total = total + price[t];
  }
  document.getElementById("total").innerHTML = total;
}

ul {
    list-style-type: decimal; /* Gives list items numbers */
    font-size:25px;
    width:20%;
}
#displayBooks {
    float:left;
    width:20%;
}
#displayPrice {
    float:left;
    width:50%;
    list-style-type: none;
}

<!DOCTYPE html>
<html>

<head>
  <title>Bookshop</title>
  <link href="css/style.css" rel="stylesheet">
  <!-- StyleSheet -->
</head>


<body class="text-center">
  <h1>BookShop</h1> 
  <!-- Header -->
  <h3>Books sold</h3> 
  <!-- Team intro -->
  <ul id="displayBooks">
    <!-- Div to display the teams -->

  </ul>
  <ul id="displayPrice">
    <!-- Div to display the teams -->

  </ul>
  <div id="total">

  </div>

  <script src="js/script.js"></script>
</body>

</html>

P.S这是我第一次在这里问一个问题，所以如果它的结构不是很好，那么我会事先道歉并希望你仍然可以全力以赴

Answer 1

试试这个：

document.addEventListener("DOMContentLoaded", function() {
  enterBooks()
}); // Event listener - When page loads, call enterBooks function

function enterBooks() { // enterBooks function
  
  var books = []; // Defines books variable as an array
  var price = [];
  var priceText=[];
  for (var i = 0; i < 5; i++) { // for loop to loop 5 times
    
    books.push("<li>" + prompt("Enter a book") + "</li>"); // PUSH adds a new item to the array in the form of a prompt with <li> tags either side of each.
      price[i]=parseInt(prompt("Enter the price"));
      priceText.push("<li>" + "£" + price[i] + "</li>"); // Once again PUSH adds a new item to the array in the form of a prompt with <li> tags either side of each. This then displays next to each book.

 
    document.getElementById("displayPrice").innerHTML = priceText.join("");
    document.getElementById("displayBooks").innerHTML = (books.join(""));
  }
  // --------- This is the part i cannot seem to get -----------
  var total = 0;

  for (var t = 0; t < price.length; t++) {
    total = total + price[t];
  }
  document.getElementById("total").innerHTML = total+ "£";
}

ul {
    list-style-type: decimal; /* Gives list items numbers */
    font-size:25px;
    width:20%;
}
#displayBooks {
    float:left;
    width:20%;
}
#displayPrice {
    float:left;
    width:50%;
    list-style-type: none;
}

<!DOCTYPE html>
<html>

<head>
  <title>Bookshop</title>
  <link href="css/style.css" rel="stylesheet">
  <!-- StyleSheet -->
</head>


<body class="text-center">
  <h1>BookShop</h1> 
  <!-- Header -->
  <h3>Books sold</h3> 
  <!-- Team intro -->
  <ul id="displayBooks">
    <!-- Div to display the teams -->

  </ul>
  <ul id="displayPrice">
    <!-- Div to display the teams -->

  </ul>
  <div id="total">

  </div>

  <script src="js/script.js"></script>
</body>

</html>

Answer 2

这是因为您在价格数组中添加了整个HTML，因此它不会添加，因为它不是数字数据。

这应该有效：

var input = parseInt(prompt("Enter the price"));
price.push(input);

Answer 3

请更改

for (var p = 0; p < 1; p++) { // for loop to loop 1 time
    price.push("<li>" + "£" + parseInt(prompt("Enter the price")) + "</li>"); // Once again PUSH adds a new item to the array in the form of a prompt with <li> tags either side of each. This then displays next to each book.
}
document.getElementById("displayPrice").innerHTML += (price.join(""));

到

// no need for loop
price.push(parseInt(prompt("Enter the price"), 10)); // just the price, added base to parseInt (really? not parseFloat?)
document.getElementById("displayPrice").innerHTML += price.map(function (a) {
    return '<li>GBP' + a + '</li>'; // build here the string for output
}).join("");

添加javascript数组的值

3 个答案: