新手javascript提示计算器问题

所以我才真正开始我的javascript之旅。我只是刚刚开始DOM操作，对很多javascript还是很陌生的…你可以从我的代码中看出这一点

我正在摆弄一个tip计算器（我猜是相当标准的新手项目），在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>

用我下面的钢笔可能更容易看到这个！

HTML 在HTML中，您正在用

-表单通常用于向web服务器发送数据、提交或验证等。在本例中，您只是将其用作容器，因此可以坚持使用标准

这导致您提交时计算器消失的问题

JavaScript 范围界定最初，您是在全局范围内定义所有变量，而不是在函数范围内。这通常是可以避免的，因为它可能会导致变量覆盖问题、无法跟踪更改、通常是意外行为-

函数-函数可能是作用域的产物，但一般来说，您希望函数接受输入并返回值，而不是修改函数作用域之外的值-返回输出有助于避免意外更改，而使用参数输入值则允许更多的控制和可读性

在这段代码中，我不想直接使用函数和执行数学运算，因为它很简单&只调用了一次——但是您可以自由地做您想做的事情

//这将全局更改tip的值，同时还将使用百分比和账单的设置变量
函数calcTip（）{
小费=百分比*账单
}
//这允许我们将函数的输出返回到所选变量
//同时也接受我们想要的投入
功能计算（百分比，账单）{
返回百分比*票据；
}
设tip=calcTip（0.10120）；//返回12；

---

类型-在主函数中，检索元素的

值

，并将其分配给

账单

和

百分比

。但是，

.value

将返回一个字符串，而不管输入是“a”字符还是“2”字符-这在您尝试添加值时会导致问题，因为添加操作符

+

在与字符串和数字一起使用时会执行不同的操作

例如，当与字符串和数字一起使用时，它只会将这两个变量合并在一起，而不会像您预期的那样将它们相加

让a=“5”//类型：字符串
设b=120；//类型：编号
a+b/“5120”

当与两个数字一起使用时，可以看到正确的行为

设a=5；//类型：编号
设b=120；//类型：编号
a+b//125

在您的例子中，我们可以使用and-parseInt将字符串值

bill

&

percent

转换为数字，而parseFloat将转换为浮点数

---

代码片段中还有一些小改动，但在您将其发布到代码审阅之前，这对您来说只是一些快速的事情-这绝对不是一种正确的方式，有很多，但希望它能帮助您继续前进

document.getElementById（'submit-button'）。addEventListener（'click'，function（）{
//获得账单金额
let bill=parseInt（document.getElementById（'bill-amount'）.value）；
//从所选复选框中获取百分比
/*let percent=document.getElementsByName（'tip-percent'）*/
let percent=parseFloat（document.querySelector（'input[name=“tip percent”]：checked'）。值）；
//如果这些函数很简单，就没有理由将它们作为函数&只调用一次
小费=百分之*账单；
让finalBill=账单+小费；
//在html中添加结果
document.getElementById（'tip-to-pay'）。textContent='$'+tip；
document.getElementById（'bill-to-pay'）。textContent='$'+最终票据；
//显示结果
document.querySelector（“.totals容器”）.style.display='flex'；
})

*{
保证金：0；
填充：0；
}
html{
字体系列：zilla slab；
字号：18px；
字体大小：300；
背景图片：url（imgs/restaurant.jpg）；
背景位置：中心；
}
.第页{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.集装箱{
显示器：flex；
证明内容：中心；
弯曲方向：立柱；
背景色：rgba（204238255,0.9）；
填充：50px 100px 50px 100px；
利润率最高：2%；
文本对齐：居中；
盒影：0px 8px 40px rgba（0,0,0,0.5），0px 10px 20px rgba（0,0,0,0.7）；
边界半径：40px；
}
.容器>h2{
垫底：1.6rem；
字体大小：2.5rem；
}
.container>p{
垫底：1毫米；
字体大小：1.5rem；
}
.container>输入{
文本对齐：居中；
填充：4px；
字号：1.2rem；
宽度：160px；
左缘：19%；
边缘底部：1rem；
}
.无线电集装箱{
显示器：flex；
证明内容：之间的空间；
}
.无线电信箱{
显示器：flex；
文本对齐：居中；
对齐项目：居中；
弯曲方向：立柱；
}
.广播风格{
裕度：10px 0 1.2rem 0；
光标：指针；
大纲：无；
}
钮扣{
填充：8px 40px 8px 40px；
文本转换：大写；
背景色：#fff；
边界：无；
边界半径：45px；
盒影：0px 8px 15px rgba（0,0,0,0.3）；
转换：所有0.3秒到0秒；
光标：指针；
大纲：无；
字体系列：zilla slab；
字体大小：300；
字号：1rem；
}
.集装箱总数{
显示：无；
}
.总数{
显示器：flex；
弯曲
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
}