家庭作業幫助 - Javascript硬幣罐

我們的老師要求我們創建一個硬幣罐，它將計算我們有多少便士，硬幣等，然後提供總金額。家庭作業幫助 - Javascript硬幣罐

這是他希望我們使用

https://online.pcc.edu/content/enforced/70599-22278.201302/labs/frameworks/Lab4Template.html?_&d2lSessionVal=0Zb6SMZBBcQ8ENPN4HdQk4js0

他希望我們在用逗號分隔相同的文本框中輸入便士，鎳，角錢，季度模板。我的問題是，我該怎麼做？我不知道如何在JavaScript中做到這一點。任何人都可以帶領我走向正確的方向。

這裏是用String.split

var valuesArray = yourInput.split(',');

它給由,被分開的值的數組的代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title> 122 Lab 4 Template </title> 
    <meta name="author" content="Lee Middleton" /> 
    <meta name="keywords" content="CIS122" /> 
    <meta name="description" content="CIS 122 Lab 4" /> 
    <link rel="stylesheet" type="text/css" href="/content/enforced/70599-22278.201302/labs/frameworks/../../new122_Style.css?_&amp;d2lSessionVal=FeMQRN1p4YNBW7SRb8H38sRQW" /> 
    <style type="text/css"> 
     .container { 
      border: 1px solid black; 
      border-radius: 15px; 
      width: 350px; 
      margin: 25px auto; 
      padding: 10px; 
     } 
     .result { 
      width: 175px; 
      float: left; 
     } 
     p { margin: 5px 0 0 5px;} 
     .clear { clear: both; } 
     input[type='button'] { 
      margin: 10px 0 0 5px; 
     } 
    </style> 
    <script language="javascript"> 
     function countCoins() 
     { 
      // Add your code here to count the coins and display your answers 
     } 
    </script> 

<script type="text/javascript" src="/d2l/common/mathjax/2.0/MathJax.js?config=MML_HTMLorMML%2c%2fd2l%2flp%2fmath%2fdisplay%2fconfig.js%3fv%3d9.4.1000.156-10" ></script></head> 

<body> 
<h1>CIS 122 Lab 4</h1> 
<div class="container"> 
<h2>SORT-O-COIN</h2> 
<form name="clubForm" style="margin-bottom: 10px;"> 
<div style="margin-left: 10px;">Coin Jar <input name="coinJar" size="40" type="text" /></div> 
<p>Number of pennies: <span name="pennies"></span></p> 
<p>Number of nickels: <span name="pennies"></span></p> 
<p>Number of dimes: <span name="pennies"></span></p> 
<p>Number of quarters: <span name="pennies"></span></p> 
<p>Number of half-dollars: <span name="pennies"></span></p> 
<p>Total number of coins: <span name="totalCoins"></span></p> 
<p>Total value: <span name="totalValue"></span></p> 
<input value="Count the coins" onclick="countCoins()" type="button" /></form></div> 
</body> 
</html>

來源

2013-05-09 Augusto

試一試，看看你能走多遠！ – lbstr 2013-05-09 22:32:20

你的鏈接不起作用，顯示登錄表格 – Drahcir 2013-05-09 22:32:22

你堅持什麼部分？將字符串拆分爲其組件或其他部分？ – 2013-05-09 22:33:50

您的文字，用逗號分開。它們可以通過索引訪問。

var first = valuesArray[0]; 
var second = valuesArray[1]; //and so on...

至於計數，你可以從那裏算出來。

來源

2013-05-09 22:32:37 Joseph

謝謝Joseph現在有道理。 – Augusto 2013-05-09 22:48:52

首先你需要分割文本框的文本。

var value = mystring.split(",");

然後去通過數組中的每一項。

首先你增加價值[x]的總硬幣數量。然後，硬幣型的ID設置爲值[X]的值，例如

document.getElementById('pennies').innerHTML = value[0];

然後採取值[x]倍的硬幣的值，例如

totalamount = totalamount + (value[x] * 1);

便士和添加它的總金額。最後，您可以使用 document.getElementById（'totalValue'）。innerHTML = totalamount來設置總值。

總體而言，這將是這樣的：

function countCoins() { 
// Add your code here to count the coins and display your answers 
var coinJar = document.getElementsByName("coinJar")[0].value; //first get the value 
var coinArray = coinJar.split(","); //split it 
var values = [0.01, 0.05, 0.10, 0.25, 0.50]; //coin values 
var ids = ['pennies', 'nickels', 'dimes', 'quarters', 'halfdollars']; //ids of coins* 
var total = 0; //total dollar amount 
var coinnumber = 0; //amount of coins. 

for (var i = 0; i < coinArray.length; i++) { 
    var currentvalue = parseInt(coinArray[i]); //value of current coin 
    document.getElementsByName(ids[i])[0].innerHTML = currentvalue; //set the html 
    total += currentvalue * values[i]; 
    coinnumber += currentvalue; 

} 
document.getElementsByName('totalValue')[0].innerHTML = total; 
document.getElementsByName('totalCoins')[0].innerHTML = coinnumber; 


}

JSFiddle

來源

2013-05-09 22:56:49 Simon

爲什麼你的值是字符串？ – Bergi 2013-05-09 23:20:44

@Simon我正在嘗試使用您的代碼，但由於未知原因，它不起作用。我錯過了什麼人嗎？ – Augusto 2013-05-10 01:15:00

@Bergi因爲我沒有注意。（_fixed代碼並添加了一個可用的JSFiddle_） – Simon 2013-05-10 11:53:21

您可以使用此作爲參考。

注意：這可能並不完整，有些部分可能仍需要完成，但它顯示了您應該需要知道的所有信息，處理這樣的問題，或給出具體的事情來搜索/提問以便你可以學習。

CSS

.container { 
    border: 1px solid black; 
    border-radius: 15px; 
    width: 350px; 
    margin: 25px auto; 
    padding: 10px; 
} 
.result { 
    width: 175px; 
    float: left; 
} 
p { 
    margin: 5px 0 0 5px; 
} 
.clear { 
    clear: both; 
} 
input[type='button'] { 
    margin: 10px 0 0 5px; 
}

HTML

<h1>CIS 122 Lab 4</h1> 

<div class="container"> 

<h2>SORT-O-COIN</h2> 

    <form id="clubForm" style="margin-bottom: 10px;"> 
     <div style="margin-left: 10px;">Coin Jar 
      <input id="coinJar" size="40" type="text"> 
     </div> 
     <p>Number of pennies: <span id="pennies"></span> 

     </p> 
     <p>Number of nickels: <span id="nickels"></span> 

     </p> 
     <p>Number of dimes: <span id="dimes"></span> 

     </p> 
     <p>Number of quarters: <span id="quarters"></span> 

     </p> 
     <p>Number of half-dollars: <span id="halfDollars"></span> 

     </p> 
     <p>Total number of coins: <span id="totalCoins"></span> 

     </p> 
     <p>Total value: <span id="totalValue"></span> 

     </p> 
     <input value="Count the coins" id="countCoinsButton" type="button"> 
    </form> 
</div>

的Javascript

(function (global) { 
    var types = "pennies nickels dimes quarters halfDollars".split(" "), 
     worths = "0.01 0.05 0.10 0.25 0.5".split(" "), 
     numTypes = types.length, 
     totals = {}, 
     coinJar, 
     clubForm; 

    function countCoins() { 
     var values = coinJar.value.trim().split(","), 
      length = Math.min(numTypes, values.length), 
      i = 0, 
      coins, 
      value; 

     clubForm.reset(); 
     while (i < length) { 
      value = values[i].trim(); 
      if (value !== "") { 
       coins = parseInt(value, 10) || 0; 
       totals[types[i]] = (totals[types[i]] || 0) + coins; 
       totals["coins"] = (totals["coins"] || 0) + coins; 
       totals["value"] = parseFloat(((totals["value"] || 0) + (coins * parseFloat(worths[i]))).toFixed(2)); 
      } 

      i += 1; 
     } 

     length = types.length; 
     i = 0; 
     while (i < length) { 
      document.getElementById(types[i]).textContent = totals[types[i]] || 0; 
      i += 1; 
     } 

     document.getElementById("totalCoins").textContent = totals["coins"] || 0; 
     document.getElementById("totalValue").textContent = totals["value"] || "0.00"; 
    } 

    global.addEventListener("load", function onLoad() { 
     global.removeEventListener("load", onLoad); 
     clubForm = document.getElementById("clubForm"); 
     coinJar = document.getElementById("coinJar"); 
     document.getElementById("countCoinsButton").addEventListener("click", countCoins, false); 
    }, false); 
}(window))

在jsfiddle

來源

2013-05-09 23:16:24 Xotic750

這段代碼就是這個工作，但很難遵循。非常感謝你。 – Augusto 2013-05-10 13:52:09

我認爲你不會找到很多簡單的解決方案。雖然我確定它是否有評論，那麼你可能會發現它更容易，或者有人告訴你什麼是線路排隊。 – Xotic750 2013-05-10 14:03:52

家庭作業幫助 - Javascript硬幣罐

回答

相關問題