家庭作业帮助 - 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硬币罐

回答

相关问题