簡體   English   中英

為什么我的函數不能運行 onclick?

[英]Why wont my function run onclick?

所以我正在用 Javascript 制作汽水機。 我需要跟蹤每種蘇打水的手頭數量,以及手頭有多少錢的累計,並作為貸項插入。 它也需要能夠做出改變。

我寫了大部分內容,但我的按鈕似乎沒有連接。 它就像從 html 到 js 的完全斷開。

這是我的項目的 jsfiddle:jsfiddle

我認為問題在於我可能對這個問題想得太多。 只需要第二雙眼睛。

您的代碼存在許多問題,從您的 JSFiddle 配置開始,然后是如何正確聲明或調用您的任何函數:

你有:

function(addNickel){
    var availableCredit = availableCredit + 0.05;
}

和:

 onclick="function(addNickel)"

這兩者都將函數名稱放在括號中而不是放在括號之前。 代碼應該是:

function addNickel(){
    var availableCredit = availableCredit + 0.05;
}

和:

 onclick="addNickel()"

你所有的函數聲明和調用都是這樣的,需要更新。

而且,在不應該出現的地方使用分號的錯誤,並在需要alert進行數學運算時使用prompt ,但隨后不將答案存儲在任何地方。 導致大量冗余代碼。 您不需要數學函數來更新每個蘇打水的庫存總數或手頭數量。 只需創建一個函數並傳入一個數學可以使用的參數。 一般的經驗法則是“將變化的東西與沒有變化的東西隔離開來”。 你的算法不會從蘇打水到蘇打水,只有數量會發生變化。

這仍然需要一些清理,但這里有一個工作版本,刪除了冗余代碼並清理了語法:

 $(function(){ var sodaTotals = [10, 10, 10, 10]; var cashOnHand = 40; var currentCredit = 0; var rootBeerTotal = document.getElementById('root_beer_instock'); var pepsiTotal = document.getElementById('pepsi_instock'); var orangeTotal = document.getElementById('orange_instock'); var mtDewTotal = document.getElementById('mt_dew_instock'); // Put HTML elements into an array that maps to the sodaTotals array var stock = [rootBeerTotal, pepsiTotal, orangeTotal, mtDewTotal]; var machineFunds = document.getElementById('funds'); var availableCredit = document.getElementById('available_credit'); // Get Button references: var $btnNickel = $("#nickel"); var $btnDime = $("#dime"); var $btnQuarter = $("#quarter"); var $btnDollar = $("#1_dollar"); var $btn5Dollar = $("#5_dollar"); var $btnRB = $("#root_beer"); var $btnPep = $("#pepsi"); var $btnOr = $("#orange"); var $btnDew = $("#mt_dew"); var $btnReload = $("#reload_soda"); var $btnReset = $("#reset_COH"); // Wire up event handlers for buttons. Each handler will call the single math function // but pass it the correct amount to modify the amount by $btnNickel.on("click", function(){ adjustPrice(.05); }); $btnDime.on("click", function(){ adjustPrice(.1); }); $btnQuarter.on("click", function(){ adjustPrice(.25); }); $btnDollar.on("click", function(){ adjustPrice(1); }); $btn5Dollar.on("click", function(){ adjustPrice(5); }); // Array indexes start from 0, not 1 $btnRB.on("click", function(){ dispenseSoda(0); }); $btnPep.on("click", function(){ dispenseSoda(1); }); $btnOr.on("click", function(){ dispenseSoda(2); }); $btnDew.on("click", function(){ dispenseSoda(3); }); $btnReload.on("click", reloadSoda); $btnReset.on("click", resetCOH); // Money stuff //Don't declare the variables in the functions because that will wipe out the old values var credit = null; // You don't need a function for each transaction, just pass the value that needs to be adjusted function adjustPrice(amount){ credit += amount; availableCredit.textContent = credit.toFixed(2); machineFunds.textContent = credit.toFixed(2); } // Reset tools function reloadSoda(){ sodaTotals = [10, 10, 10, 10]; } function resetCOH(){ cashOnHand = 40; alert("You reach into the machine and pull out what appears to be Monopoly money. Make it rain!"); } // Each function represents a different flavor represented as 'dispenseFlavor' function dispenseSoda(flavorIndex){ if (credit >= 0.5) { // Deduct stock amount sodaTotals[flavorIndex]--; stock[flavorIndex].textContent = sodaTotals[flavorIndex]; // Deduct funds credit -= 0.50; document.getElementById('available_credit').textContent = credit.toFixed(2); // Add to machine's balance cashOnHand += 0.50; alert('Please pickup your soda from below. Thank you for your purchase!'); // Check if user has any additional money in machine if(credit > 0){ if (confirm("Would you like to make another purchase?")) { alert("Please select another soda."); } else { alert('Please collect your refund below.'); document.getElementById("refund_tray").innerHTML = credit; var availableCredit = 0; } } else { alert('Insuficient funds, please add additional funds.'); } } } });
 .site-title { font-size: 3rem; font-color: rgb(200, 200, 200); } .current-levels { width: 20%; } .payment-container { width: 75%; border: solid black 2px; } .payment { display: flex; flex-direction: row; justify-content: space-around; } .payment-container p { text-align: center; } .button-region-container { border: solid black 2px; } .button-container button { height: 5rem; width: 12%; background-size: contain; background-repeat: no-repeat; } button#root_beer { background-image: url('http://full.nick2go.com/img/root-beer.jpg'); } button#pepsi { background-image: url('http://full.nick2go.com/img/pepsi.jpg'); } button#orange { background-image: url('http://full.nick2go.com/img/orange.jpg'); } button#mt_dew { background-image: url('http://full.nick2go.com/img/mt-dew.jpg'); }
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="site-title"> <h2>Gasia's Soda Machine</h2> </div> <div class="payment-container"> <div class="credit-container"> <p>Funds in the Machine: <span id="funds"></span></p> <p>Available Credit: <span id="available_credit"></span></p> <p>Refund Tray:<span id="refund_tray"></span></p> <p>Click the below buttons to insert money into the machine:</p> <div class="payment"> <button type="button" id="nickel">$0.05</button> <button type="button" id="dime">$0.10</button> <button type="button" id="quarter">$0.25</button> <button type="button" id="1_dollar">$1.00</button> <button type="button" id="5_dollar">$5.00</button> </div> </div> <div class="button-region-container col-xs-12"> <p class="button-title">Select a soda from below:</p> <div class="button-container"> <button id="root_beer" alt="root beer"></button> <button id="pepsi" alt="pepsi can"></button> <button id="orange" alt="orange can"></button> <button id="mt_dew" alt="mt-dew can"></button> </div> </div> <div class="current-levels .col-xs-6"> <div class="flex-soda-total" id="rootbeer_stats"> <p id="root_beer_title">Number of cans of Root Beer remaining:<span id="root_beer_instock">10</span></p> </div> <div class="flex-soda-total" id="rootbeer_stats"> <p id="pepsi_title">Number of cans of Pepsi remaining:<span id="pepsi_instock">10</span></p> </div> <div class="flex-soda-total" id="rootbeer_stats"> <p id="orange_title">Number of cans of Orange remaining:<span id="orange_instock">10</span></p> </div> <div class="flex-soda-total" id="rootbeer_stats"> <p id="mt_dew_title">Number of cans of Mt. Dew remaining:<span id="mt_dew_instock">10</span></p> </div> </div> <div class="admin-tools"> <p>The button on the left will reset the soda stock, back to default levels. The button on the right will withdraw all the money from the machine. Choose wisely.</p> <button id="reload_soda">Refill Soda Machine</button> <button id="reset_COH">Rob The Machine!</button> </div>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM