新手 javascript 提示計算器問題

Question

所以我只是真正開始了我的 javascript 之旅。 我只是剛剛接觸 DOM 操作，對很多 javascript 仍然很陌生……正如您可能從我的代碼中看出的那樣！

我正在使用小費計算器（我猜是相當標准的新手項目）並且在使用 DOM 以及如何從輸入（文本和收音機）中選擇某些元素並讓它們提交時遇到了真正的困難。

關於我下面的代碼的任何建議都會很棒。 我全神貫注，准備好為所有的錯誤挨打……但我非常想知道我做錯了什么！

<form class="container">
        <h2>Tip Calculator</h2>
        <p>Enter Bill Amount</p>
        <input type="text" class="input-styles" placeholder="£££" id="bill-amount">
        <p>Select Percentage Of Bill</p>
        <div class="radio-container">
            <div class="radio-styles">                        <p>10%</p>
                <input type="radio" class="radio-styles" name="tip-percent" value="0.1">
            </div>
            <div class="radio-styles">
                <p>15%</p>
                <input type="radio" class="radio-styles" name="tip-percent" value="0.15">
            </div>
              <div class="radio-styles">
                <p>20%</p>
                <input type="radio" class="radio-styles" name="tip-percent" value="0.2">
            </div>
            <div class="radio-styles">
                <p>25%</p>
                <input type="radio" class="radio-styles" name="tip-percent" value="0.25">
            </div>
        </div>
        <div class="submit-container">
            <button type="submit" name="tip-submit" id="submit-button">submit</button>
        </div>
        <div class="totals-container">
            <div class="totals">
                <h2>Tip To Pay</h2>
                <h2 id="tip-to-pay"></h2>
                <h2 id="bill-final">Total Bill To Pay</h2>
                <h2 id="bill-to-pay"></h2>
            </div>
        </div>
    </form>

下面的Javascript...

var bill, percent, tip, finalBill;


document.getElementById('submit-button').addEventListener('click', function() {

// get bill amount
bill = document.getElementById('bill-amount').value

//get percent amount from checkboxes
percent = document.getElementsByName('tip-percent').checked;
tip = calcTip();
finalBill = finalAmount();

// edit results in html
document.getElementById('tip-to-pay').textContent = tip;
document.getElementById('bill-to-pay').textContent = finalBill;

// display result
document.querySelector('.totals-container').style.display = 'flex';

}

function calcTip() {
    tip = percent * bill
}

function finalAmount() {
    finalBill = tip + bill
}

用我下面的筆可能更容易看到這個！ https://codepen.io/rickwall/pen/WNbpmoW

Answer 1

HTML

在您的 HTML 中，您使用<form class="container">包裝計算器 - 表單通常用於將數據發送到網絡服務器，用於提交或驗證等。 在這種情況下，您只是將它用作容器，因此可以堅持使用標准的<div>

這導致您提交時計算器消失的問題

JavaScript

范圍- 最初您是在全局范圍內定義所有變量，而不是在函數范圍內。 這通常是可以避免的，因為它可能會導致變量覆蓋、丟失更改跟蹤、通常出現意外行為的問題 - 您可以在此處准備更多相關信息

函數- 你的函數可能是你的作用域的產物，但一般來說你希望你的函數接受一個輸入，並返回一個值而不是修改函數范圍之外的值 - 返回你的輸出有助於避免意外的變化，而使用參數輸入值允許更多的控制和可讀性

在這段代碼中，我很想不使用函數並直接執行數學運算，因為它很簡單並且只調用一次 - 但你可以隨意做你想做的

// This will change the value of tip globally, while also using set variables for percent and bill
function calcTip () {
  tip = percent * bill
}

// This allows us to return the output of our function to our chosen variable
// while also taking the inputs we want

function calcTip (percent, bill) {
  return percent * bill;
}

let tip = calcTip(0.10, 120); // returns 12;

從 MDN 文檔中閱讀有關函數的更多信息

---

類型- 在您的主函數中，您正在檢索元素的.value ，並將它們分配給bill和percent 。 但是， .value將返回一個String ，無論輸入是“a”字符還是“2”字符 - 當您嘗試添加值時，這會導致問題，因為添加運算符+執行不同的操作與字符串和數字一起使用。

例如，當與String和Number 一起使用時，它會簡單地將兩個變量連接在一起 - 而不是像您期望的那樣添加它們

let a = "5"; // Type: String
let b = 120; // Type: Number

a + b // "5120"

與兩個數字一起使用時會看到正確的行為

let a = 5;   // Type: Number
let b = 120; // Type: Number

a + b // 125

在您的情況下，我們可以通過使用parseInt(x)和parseFloat(x)將我們的字符串值bill & percent轉換為數字 - parseInt 轉換為整數 Number，而 parseFloat 轉換為浮點 Number

---

代碼段中的代碼還有一些小的更改，但這只是在您將其發布到代碼審查之前的一些快速更改 - 這絕不是執行此操作的絕對正確方法，有很多，但它希望能幫助你前進

 document.getElementById('submit-button').addEventListener('click', function() { // Get bill amount let bill = parseInt(document.getElementById('bill-amount').value); // Get percent from selected checkbox /* let percent = document.getElementsByName('tip-percent'); */ let percent = parseFloat(document.querySelector('input[name="tip-percent"]:checked').value); // No reason to have these as functions if they're simple & only called once let tip = percent * bill; let finalBill = bill + tip; // Add results in html document.getElementById('tip-to-pay').textContent = '$' + tip; document.getElementById('bill-to-pay').textContent = '$' + finalBill; // Dislay result document.querySelector('.totals-container').style.display = 'flex'; })

 * { margin: 0; padding: 0; } html { font-family: zilla slab; font-size: 18px; font-weight: 300; background-image: url(imgs/restaurant.jpg); background-position: center; } .page { display: flex; justify-content: center; align-items: center; } .container { display: flex; justify-content: center; flex-direction: column; background-color: rgba(204, 238, 255, 0.9); padding: 50px 100px 50px 100px; margin-top: 2%; text-align: center; box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.5), 0px 10px 20px rgba(0, 0, 0, 0.7); border-radius: 40px; } .container>h2 { padding-bottom: 1.6rem; font-size: 2.5rem; } .container>p { padding-bottom: 1rem; font-size: 1.5rem; } .container>input { text-align: center; padding: 4px; font-size: 1.2rem; width: 160px; margin-left: 19%; margin-bottom: 1rem; } .radio-container { display: flex; justify-content: space-between; } .radio-box { display: flex; text-align: center; align-items: center; flex-direction: column; } .radio-styles { margin: 10px 0 1.2rem 0; cursor: pointer; outline: none; } button { padding: 8px 40px 8px 40px; text-transform: uppercase; background-color: #fff; border: none; border-radius: 45px; box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3); transition: all 0.3s ease 0s; cursor: pointer; outline: none; font-family: zilla slab; font-weight: 300; font-size: 1rem; } .totals-container { display: none; } .totals { display: flex; flex-direction: column; } #bill-final { font-size: 2rem; } .totals h2 { padding-bottom: 1.6rem; }

 <div class="page"> <div class="container"> <h2>Tip Calculator</h2> <p>Enter Bill Amount</p> <input type="text" class="input-styles" placeholder="£££" id="bill-amount"> <p>Select Percentage Of Bill</p> <div class="radio-container"> <div class="radio-styles"> <p>10%</p> <input type="radio" class="radio-styles" name="tip-percent" value="0.10"> </div> <div class="radio-styles"> <p>15%</p> <input type="radio" class="radio-styles" name="tip-percent" value="0.15"> </div> <div class="radio-styles"> <p>20%</p> <input type="radio" class="radio-styles" name="tip-percent" value="0.20"> </div> <div class="radio-styles"> <p>25%</p> <input type="radio" class="radio-styles" name="tip-percent" value="0.25"> </div> </div> <div class="submit-container"> <button type="submit" name="tip-submit" id="submit-button">submit</button> </div> <div class="totals-container"> <div class="totals"> <h2>Tip To Pay</h2> <h2 id="tip-to-pay"></h2> <h2 id="bill-final">Total Bill To Pay</h2> <h2 id="bill-to-pay"></h2> </div> </div> </div> </div>