使用JavaScript制作成本计算器时遇到问题_Javascript_Html

使用JavaScript制作成本计算器时遇到问题

javascript html

使用JavaScript制作成本计算器时遇到问题,javascript,html,Javascript,Html,我正在开发万古霉素成本计算器，但似乎无法找出我的代码哪里错了。我也尝试了JavaScript控制台，但没有看到任何错误。目标是获取所有输入并在表单的output属性中显示结果，但似乎无法找出代码中的错误 let form = document.querySelector('form'); let output = document.querySelector('#output'); let vancomycin = pars

我正在开发万古霉素成本计算器，但似乎无法找出我的代码哪里错了。我也尝试了JavaScript控制台，但没有看到任何错误。目标是获取所有输入并在表单的output属性中显示结果，但似乎无法找出代码中的错误

            let form = document.querySelector('form');
            let output = document.querySelector('#output');
            let vancomycin = parseFloat(document.getElementById("vancomycinCost").value);
            let diluent = parseFloat(document.getElementById("diluentCost").value);
            let ancillary = parseFloat(document.getElementById("ancillaryCost").value);
            let waste = parseFloat(document.getElementById("wastePercentage").value);
            let tHourly = parseFloat(document.getElementById("tHourlyCost").value);
            let pHourly = parseFloat(document.getElementById("pHourlyCost").value);
            let tMinutes = parseFloat(document.getElementById("tMinutesCost").value);
            let pMinutes = parseFloat(document.getElementById("pMinutesCost").value);
            let supplyCost = vancomycinCost + diluentCost + ancillaryCost;
            let laborCost = (pHourlyCost * pMinutesCost / 60) + (tHourlyCost * tMinutesCost / 60);

            form.onsubmit = function(e){
              e.prevenDefault();
              let costPerDose = (supplyCost + laborCost) * (1 + wastePercentage);
              output.innerHTML = costPerDose;

            }

以下是每剂量成本的公式：

supplyCost = vancomycinCost + diluentCost + ancillaryCost;

laborCost = (pHourlyCost * pMinutesCost / 60) + (tHourlyCost * tMinutesCost / 60);

costPerDose = (supplyCost + laborCost) * (1 + wastePercentage);

            let form = document.querySelector('form');
            let output = document.querySelector('#output');
            let vancomycin = parseFloat(document.getElementById("vancomycinCost").value);
            let diluent = parseFloat(document.getElementById("diluentCost").value);
            let ancillary = parseFloat(document.getElementById("ancillaryCost").value);
            let waste = parseFloat(document.getElementById("wastePercentage").value);
            let tHourly = parseFloat(document.getElementById("tHourlyCost").value);
            let pHourly = parseFloat(document.getElementById("pHourlyCost").value);
            let tMinutes = parseFloat(document.getElementById("tMinutesCost").value);
            let pMinutes = parseFloat(document.getElementById("pMinutesCost").value);
            let supplyCost = vancomycinCost + diluentCost + ancillaryCost;
            let laborCost = (pHourlyCost * pMinutesCost / 60) + (tHourlyCost * tMinutesCost / 60);

            form.onsubmit = function(e){
              e.prevenDefault();
              let costPerDose = (supplyCost + laborCost) * (1 + wastePercentage);
              output.innerHTML = costPerDose;

            }

HTML:

            let form = document.querySelector('form');
            let output = document.querySelector('#output');
            let vancomycin = parseFloat(document.getElementById("vancomycinCost").value);
            let diluent = parseFloat(document.getElementById("diluentCost").value);
            let ancillary = parseFloat(document.getElementById("ancillaryCost").value);
            let waste = parseFloat(document.getElementById("wastePercentage").value);
            let tHourly = parseFloat(document.getElementById("tHourlyCost").value);
            let pHourly = parseFloat(document.getElementById("pHourlyCost").value);
            let tMinutes = parseFloat(document.getElementById("tMinutesCost").value);
            let pMinutes = parseFloat(document.getElementById("pMinutesCost").value);
            let supplyCost = vancomycinCost + diluentCost + ancillaryCost;
            let laborCost = (pHourlyCost * pMinutesCost / 60) + (tHourlyCost * tMinutesCost / 60);

            form.onsubmit = function(e){
              e.prevenDefault();
              let costPerDose = (supplyCost + laborCost) * (1 + wastePercentage);
              output.innerHTML = costPerDose;

            }

声明

supplyCost

时，您没有使用之前声明的变量。我建议你换一下你的

let supplyCost=vancomycinCost+稀释成本+辅助成本

到

let supplyCost=万古霉素+稀释剂+辅助药物因为这些是解析为浮点数的值
            let form = document.querySelector('form');
            let output = document.querySelector('#output');
            let vancomycin = parseFloat(document.getElementById("vancomycinCost").value);
            let diluent = parseFloat(document.getElementById("diluentCost").value);
            let ancillary = parseFloat(document.getElementById("ancillaryCost").value);
            let waste = parseFloat(document.getElementById("wastePercentage").value);
            let tHourly = parseFloat(document.getElementById("tHourlyCost").value);
            let pHourly = parseFloat(document.getElementById("pHourlyCost").value);
            let tMinutes = parseFloat(document.getElementById("tMinutesCost").value);
            let pMinutes = parseFloat(document.getElementById("pMinutesCost").value);
            let supplyCost = vancomycinCost + diluentCost + ancillaryCost;
            let laborCost = (pHourlyCost * pMinutesCost / 60) + (tHourlyCost * tMinutesCost / 60);

            form.onsubmit = function(e){
              e.prevenDefault();
              let costPerDose = (supplyCost + laborCost) * (1 + wastePercentage);
              output.innerHTML = costPerDose;

            }

你的人工成本也一样


let laborCost=（pHourlyCost*pMinutesCost/60）+（tHourlyCost*tMinutesCost/60）

应更改为

let laboralcost=（pHourly*pMinutes/60）+（tHourly*t分钟/60）
            let form = document.querySelector('form');
            let output = document.querySelector('#output');
            let vancomycin = parseFloat(document.getElementById("vancomycinCost").value);
            let diluent = parseFloat(document.getElementById("diluentCost").value);
            let ancillary = parseFloat(document.getElementById("ancillaryCost").value);
            let waste = parseFloat(document.getElementById("wastePercentage").value);
            let tHourly = parseFloat(document.getElementById("tHourlyCost").value);
            let pHourly = parseFloat(document.getElementById("pHourlyCost").value);
            let tMinutes = parseFloat(document.getElementById("tMinutesCost").value);
            let pMinutes = parseFloat(document.getElementById("pMinutesCost").value);
            let supplyCost = vancomycinCost + diluentCost + ancillaryCost;
            let laborCost = (pHourlyCost * pMinutesCost / 60) + (tHourlyCost * tMinutesCost / 60);

            form.onsubmit = function(e){
              e.prevenDefault();
              let costPerDose = (supplyCost + laborCost) * (1 + wastePercentage);
              output.innerHTML = costPerDose;

            }

您的最后一个语法错误在第行

let costPerDose=（供应成本+人工成本）*（1+浪费百分比）

其中废物百分比
应替换为废物

            let form = document.querySelector('form');
            let output = document.querySelector('#output');
            let vancomycin = parseFloat(document.getElementById("vancomycinCost").value);
            let diluent = parseFloat(document.getElementById("diluentCost").value);
            let ancillary = parseFloat(document.getElementById("ancillaryCost").value);
            let waste = parseFloat(document.getElementById("wastePercentage").value);
            let tHourly = parseFloat(document.getElementById("tHourlyCost").value);
            let pHourly = parseFloat(document.getElementById("pHourlyCost").value);
            let tMinutes = parseFloat(document.getElementById("tMinutesCost").value);
            let pMinutes = parseFloat(document.getElementById("pMinutesCost").value);
            let supplyCost = vancomycinCost + diluentCost + ancillaryCost;
            let laborCost = (pHourlyCost * pMinutesCost / 60) + (tHourlyCost * tMinutesCost / 60);

            form.onsubmit = function(e){
              e.prevenDefault();
              let costPerDose = (supplyCost + laborCost) * (1 + wastePercentage);
              output.innerHTML = costPerDose;

            }

最后，这里要学习的是，您应该使用您声明的变量，因为使用元素的idname将为您提供实际的元素对象，而不是它的值
            let form = document.querySelector('form');
            let output = document.querySelector('#output');
            let vancomycin = parseFloat(document.getElementById("vancomycinCost").value);
            let diluent = parseFloat(document.getElementById("diluentCost").value);
            let ancillary = parseFloat(document.getElementById("ancillaryCost").value);
            let waste = parseFloat(document.getElementById("wastePercentage").value);
            let tHourly = parseFloat(document.getElementById("tHourlyCost").value);
            let pHourly = parseFloat(document.getElementById("pHourlyCost").value);
            let tMinutes = parseFloat(document.getElementById("tMinutesCost").value);
            let pMinutes = parseFloat(document.getElementById("pMinutesCost").value);
            let supplyCost = vancomycinCost + diluentCost + ancillaryCost;
            let laborCost = (pHourlyCost * pMinutesCost / 60) + (tHourlyCost * tMinutesCost / 60);

            form.onsubmit = function(e){
              e.prevenDefault();
              let costPerDose = (supplyCost + laborCost) * (1 + wastePercentage);
              output.innerHTML = costPerDose;

            }

您可能也忘记了代码周围的脚本标记
            let form = document.querySelector('form');
            let output = document.querySelector('#output');
            let vancomycin = parseFloat(document.getElementById("vancomycinCost").value);
            let diluent = parseFloat(document.getElementById("diluentCost").value);
            let ancillary = parseFloat(document.getElementById("ancillaryCost").value);
            let waste = parseFloat(document.getElementById("wastePercentage").value);
            let tHourly = parseFloat(document.getElementById("tHourlyCost").value);
            let pHourly = parseFloat(document.getElementById("pHourlyCost").value);
            let tMinutes = parseFloat(document.getElementById("tMinutesCost").value);
            let pMinutes = parseFloat(document.getElementById("pMinutesCost").value);
            let supplyCost = vancomycinCost + diluentCost + ancillaryCost;
            let laborCost = (pHourlyCost * pMinutesCost / 60) + (tHourlyCost * tMinutesCost / 60);

            form.onsubmit = function(e){
              e.prevenDefault();
              let costPerDose = (supplyCost + laborCost) * (1 + wastePercentage);
              output.innerHTML = costPerDose;

            }

EDIT：@Aydin4ik还揭示了一个事实，即您在元素中调用了一个未创建/声明的函数，即“辅助成本”onChange
event

            let form = document.querySelector('form');
            let output = document.querySelector('#output');
            let vancomycin = parseFloat(document.getElementById("vancomycinCost").value);
            let diluent = parseFloat(document.getElementById("diluentCost").value);
            let ancillary = parseFloat(document.getElementById("ancillaryCost").value);
            let waste = parseFloat(document.getElementById("wastePercentage").value);
            let tHourly = parseFloat(document.getElementById("tHourlyCost").value);
            let pHourly = parseFloat(document.getElementById("pHourlyCost").value);
            let tMinutes = parseFloat(document.getElementById("tMinutesCost").value);
            let pMinutes = parseFloat(document.getElementById("pMinutesCost").value);
            let supplyCost = vancomycinCost + diluentCost + ancillaryCost;
            let laborCost = (pHourlyCost * pMinutesCost / 60) + (tHourlyCost * tMinutesCost / 60);

            form.onsubmit = function(e){
              e.prevenDefault();
              let costPerDose = (supplyCost + laborCost) * (1 + wastePercentage);
              output.innerHTML = costPerDose;

            }

我假设index.js
脚本文件是您在上面的HTML之后粘贴的，请澄清
calculateTotal
未定义。我编写了一个新函数-returnCostPerDose（）
，如果需要onChange行为，可以使用该函数
您对supplyCost
、laboralcost
和costPerDose
的计算包含多个错误的变量名-请确保在声明变量名时使用这些变量名
您正在声明加载时的变量-您必须在每次运行新计算（onChange）时更新它们，或者在计算函数中声明它们
如果您在浏览器中以HTML形式运行代码，那么声明自己的标记不是最佳做法-请使用HTML5规范中提供的现有标记之一（请参阅
）
检查此代码段以获得最基本的工作版本，并从中改进
            let form = document.querySelector('form');
            let output = document.querySelector('#output');
            let vancomycin = parseFloat(document.getElementById("vancomycinCost").value);
            let diluent = parseFloat(document.getElementById("diluentCost").value);
            let ancillary = parseFloat(document.getElementById("ancillaryCost").value);
            let waste = parseFloat(document.getElementById("wastePercentage").value);
            let tHourly = parseFloat(document.getElementById("tHourlyCost").value);
            let pHourly = parseFloat(document.getElementById("pHourlyCost").value);
            let tMinutes = parseFloat(document.getElementById("tMinutesCost").value);
            let pMinutes = parseFloat(document.getElementById("pMinutesCost").value);
            let supplyCost = vancomycinCost + diluentCost + ancillaryCost;
            let laborCost = (pHourlyCost * pMinutesCost / 60) + (tHourlyCost * tMinutesCost / 60);

            form.onsubmit = function(e){
              e.prevenDefault();
              let costPerDose = (supplyCost + laborCost) * (1 + wastePercentage);
              output.innerHTML = costPerDose;

            }


var returnCostPerDose=函数（e）{
e、 预防默认值（）；
让万古霉素=parseFloat（document.getElementById（“vancomycinCost”）.value）；
让稀释剂=parseFloat（document.getElementById（“稀释剂成本”）.value）；
let associative=parseFloat（document.getElementById（“辅助成本”）.value）；
让waste=parseFloat（document.getElementById（“wastePercentage”）.value）；
让tHourly=parseFloat（document.getElementById（“tHourlyCost”）.value）；
让pHourly=parseFloat（document.getElementById（“pHourlyCost”）.value）；
让tMinutes=parseFloat（document.getElementById（“tMinutesCost”）.value）；
让pMinutes=parseFloat（document.getElementById（“pMinutesCost”）.value）；
让supplyCost=万古霉素+稀释剂+辅助药物；
假设人工成本=（pHourly*p分钟/60）+（tHourly*t分钟/60）；
假设成本/剂量=（供应成本+人工成本）*（1+（废物/100））；
document.getElementById（“输出”）.innerHTML=costPerDose
}

1克万古霉素剂量的成本是多少？
万古霉素成本：
稀释液成本：
辅助成本：
%废物：
药学技术：


药剂师：


见结果
为什么你的javascript在脚本
标签之外？我认为@Sean的第一个问题是正确的，但更进一步一点，你的问题并没有确切说明你期望的是什么，以及它与实际发生的情况有何不同。我猜当您单击该按钮时，您希望您的输出
标记会发生一些事情，但是当您单击该按钮时，没有任何变化。对吗？如果是这样，请回答肖恩的问题。calculateTotal未定义请查看此处并编辑您的问题。至少你需要告诉我们你想要发生什么，以及正在发生什么。可能还有其他方面可以改进。我强烈怀疑，如果你试图将这一点缩减到一个最小的、可重复的例子，你会找到答案，但如果没有，由此产生的改进问题将有助于我们帮助你。这很好用！非常感谢您的真诚努力和有效反馈！肖恩-谢谢你的指导。我可以看到我的代码中有很多错误。另外，我使用script-tagforjavascript作为外部文件，我应该指定。再次感谢你！