2013-05-09 5 views
1

우리 선생님은 우리가 가지고있는 동전의 수를 몇 개나 센다고 계산 한 다음 총 돈을줍니다. 숙제 도움 - Javascript 동전 단지

그는 우리가

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

그는 우리가 쉼표로 구분하여 같은 텍스트 상자에 동전, 센트, 10 센트, ​​분기를 입력하려면 사용하려는 템플릿입니다. 내 질문은, 어떻게 할 수 있을까요? 자바 스크립트에서 어떻게하는지 모르겠습니다. 누구든지 올바른 방향으로 나를 이끌 수 있습니까?

여기가 ,에 의해 분할 된 값의 배열을 제공 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> 
+0

그것을 소용돌이를주고 당신이 얻을 수있는 방법까지 볼! – lbstr

+0

링크가 작동하지 않아 로그인 양식이 표시됩니다. – Drahcir

+0

어떤 부분에 얽혀 있습니까? 문자열을 해당 구성 요소 또는 다른 부분으로 분할합니까? –

답변

1

당신의 텍스트입니다. 인덱스로 액세스 할 수 있습니다.

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

계산에 대해서는 여기에서 알아낼 수 있습니다.

+0

조셉은 이제 감각을 가지고 있습니다. – Augusto

0

먼저 텍스트 상자의 텍스트를 분할해야합니다.

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

그런 다음 배열의 각 항목을 확인하십시오.

먼저 총 동전 수에 [x] 값을 추가하십시오. 그러면 예컨대 값 [X]의 값으로 코 인형의 ID를 설정

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

이어서 동전에 대한 예

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

들면, 값 [X] 회 코인 값을 가지고 추가 총 금액입니다. 마지막으로 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

+2

왜 값 문자열입니까? – Bergi

+0

@Simon 귀하의 코드를 사용하려고하지만 알 수없는 이유로 작동하지 않습니다. 아무도 없어? – Augusto

+0

@Bergi 나는주의를 기울이지 않았기 때문에. (_fixed 코드와 JSFiddle_ 작업 추가) – Simon

0

당신은 참조로 사용할 수 있습니다

전반적으로,이 같은 것입니다.

참고 : 아직 완료되지 않았거나 일부 비트가 완료되어야 할 수도 있지만 그러한 질문을 다루거나 알아볼 구체적인 사항을 제시하거나 그래서 당신은 배울 수 있습니다.

CSS jsfiddle

.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> 

자바 스크립트

(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)) 

+0

이 코드는 작업을 처리하지만 따르기가 어렵습니다. 고맙습니다. – Augusto

+0

많은 솔루션을 훨씬 간단하게 찾을 수있을 것 같지 않습니다. 내가 의견이 있다면 확신 할 수 있겠지만, 더 쉽게 찾을 수있을 것입니다. – Xotic750