我的折扣代码中缺少什么才能使这项工作有效？ 我错过了一个变量吗？
[英]What is missing from my discount code to make this work? Am I missing a variable?
问题描述
我以为我的一切都是正确的，但我似乎仍然无法弄清楚为什么 function 没有按照预期的方式运行。 我有这个问题，代码有引用错误，但我不确定如何定义 function。我也通过 W3 验证器验证它，但它没有告诉我任何信息。
<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>discount amount</title>
</head>
<body>
<script>
/* Input: purchase amount
* Processing: determine through if statements if they get a discount
* Output: final price after tax
*/
// Computes and returns a discounted purchase amount.
function getDiscountedAmount(purchase) {
var purchase =
parseInt(document.getElementById('purchase').value);
var dayOfWeek = new Date().getDay();
var output = document.querySelector("#output");
let rate;
if (purchase < 50) {
rate = 0.06;
} else if (purchase < 100 && [2, 3].includes(dayOfWeek)) {
rate = 0.06;
} else if (purchase < 500 && [2, 3].includes(dayOfWeek)) {
rate = 0.06;
}
let discount = purchase * rate;
return purchase - discount;
output.innerHTML = "$" + String(getDiscountedAmount(200));
}
</script>
Please enter your final price: <input type="text" id="purchase" size="5">
<br>
<button type="button" onclick="getDiscountedAmount(purchase)">discount?
</button>
<div id="output"></div>
</body>
</html>
3 个解决方案
解决方案1
2 2021-02-15 21:19:09
你的 function 的第一行已经是错误的，你试图从无到有得到一个浮点数，你正在将你的输入参数覆盖到 function
var purchase = parseFloat();
尝试：
purchase = parseFloat(purchase);
以便它使用您的输入参数。
另外我不太确定你的日期比较dayOfWeek == (2, 3) ，我不知道这是否有效，我以前从未见过，我个人使用[2, 3].includes(dayOfWeek)
最后你的 function 返回一个值但是你在任何地方都看不到那个值，尝试使用
console.log(getDiscountedAmount(200))或任何你的价格
就您的输入和 output 而言，您想使用 DOM 操作来获取输入并显示 output。
如果您想在“输出”中查看值，那么
var output = document.querySelector("#output");
output.innerHTML = "$" + String(getDiscountedAmount(200));
将是一个简单的 DOM 机制，但它不是最干净的
另一个提示是将脚本标签最后放在正文中，因为您希望在尝试访问所有 HTML 元素之前先“定义”它们
总而言之，您的代码更简洁：
<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>discount amount</title>
</head>
<body>
Please enter your final price: <input type="text" id="myInput" size="5" /><br />
<button type="button" id="myButton">discount?</button>
<div id="myOutput"></div>
<script>
var myInput = document.querySelector("#myInput");
var myOutput = document.querySelector("#myOutput");
var myButton = document.querySelector("#myButton");
myButton.onclick = function() {
// Computes and returns a discounted purchase amount.
var purchase = parseFloat(myInput.value);
var dayOfWeek = new Date().getDay();
var rate;
if (purchase < 50) {
rate = 0.06;
} else if (purchase < 100 && [2, 3].includes(dayOfWeek)) {
rate = 0.06;
} else if (purchase < 1000) {
rate = 0.025;
} else {
rate = 0.03;
}
let discount = purchase * rate;
var finalPrice = purchase - discount;
output.innerHTML = "$" + String(finalPrice);
};
</script>
</body>
</html>
我更改了一些 ID，并将onclick移到了您的 JavaScript 中，以获得整体更清晰的代码，因为我们希望将 HTML 与 JS 分开
解决方案2
0 2021-02-15 21:53:06
这是您要查找的内容：
body{margin:0;padding:0;font-family:arial;background:rgb(30,30,30);height:100vh;width:100%}.wrapper{background:lightgrey;background:linear-gradient(318deg,rgba(217,123,123,1) 0%,rgba(135,249,255,1) 100%);width:80%;height:126px;position:relative;top:calc(50vh - 63px);left:10%;padding:3px;border-radius:12px}.content{background:rgb(80,80,80);background:rgba(0,0,0,.5);border-radius:10px;width:calc(100% - 24px);padding:12px}label{font-weight:700;color:#fff}input{width:calc(100% - 16px);margin-top:4px;padding:6px;border:2px solid #fff;border:2px solid rgba(0,0,0,.3);color:#fff;background:#fff;background:rgba(0,0,0,.5);border-radius:6px;font-size:14pt}::placeholder{color:#fff;color:rgba(255,255,255,.8)}input:focus{outline:none;border:2px solid #fff;border:3px solid rgba(0,0,0,.6);padding:5px}.output-container{display:inline-block;float:right;width:180px;padding:8px;color:#fff;background:#fff;background:rgba(0,0,0,.5);font-size:12pt;margin-top:4px;border-radius:6px;font-size:14pt}button{margin-top:4px;width:150px;border:0;border-radius:6px;padding:8px;background:gray;background:rgba(0,0,0,.6);color:#fff;font-weight:700;font-size:14pt;transition:0.25s ease}button:focus{outline:none;}button:hover{cursor:pointer;background:gray;background:rgba(0,0,0,.8)}@media only screen and (max-width:400px){.wrapper{width:calc(100% - 6px);height:auto;top:0;left:0;border-radius:0}.output-container,button{width:calc(50% - 12px)}}
<:DOCTYPE HTML> <html lang="en-us"> <head> <meta charset="utf-8"> <title>discount amount</title> </head> <body> <div class='wrapper'> <div class='content'> <label>Please enter your final price.</label><input type="text" autocomplete="off" placeholder='Enter price..:' id="purchase" size="5"> <button type="button" onclick="getDiscountedAmount()">See discount</button> <div class='output-container'>Total. <span id='output'>--</span></div> </div> </div> <script> //Get the output element outputEl = document;getElementById("output"). function getDiscountedAmount() { //Gets the value of your input var purchase = parseFloat((document.getElementById('purchase').value),replace(/[^\d]/g;"")). var dayOfWeek = new Date();getDay(); var rate. if (purchase < 50) { rate = 0;06, } else if (purchase < 100 && [2. 3].includes(dayOfWeek)) { rate = 0;06, } else if (purchase < 500 && [2. 3].includes(dayOfWeek)) { rate = 0;06. } else { rate = 0;03; } let discount = purchase * rate; let output = purchase - discount. //Checks if output is a number; if(isNaN(output)){ output = 'Not a number;'. } else{ output = '$' + output; } //Puts the output inside of your "output" <div> outputEl.textContent = output; } </script> </body> </html>
解决方案3
0
当你加载你的脚本时，你会得到一个Uncaught SyntaxError因为你用两个}关闭了你的 function 。 要解决此问题，只需删除第 31 行。
在 function 的第一行中，您使用的是parseFloat(); 错误的：
var purchase = parseFloat();
做：
var purchase = parseFloat(purchase);
比你需要得到你的输入号码。 onclick 事件中的getDiscountedAmount(purchase)不起作用。 你可以使用这个：
var purchase = document.getElementById("purchase").value; // get value from text field
purchase = parseFloat(purchase); // convert to float
最后，您必须这样做才能在 output div 中显示数字：
let output = purchase - discount;
document.getElementById("output").innerText = output; // set discont into your output div
return output;
这是您的代码以及我如何修复它：
<:DOCTYPE HTML> <html lang="en-us"> <head> <meta charset="utf-8"> <title>discount amount</title> <script> /* Input: purchase amount * Processing: determine through if statements if they get a discount * Output. final price after tax */ // Computes and returns a discounted purchase amount. function getDiscountedAmount(purchase) { var purchase = document.getElementById("purchase");value; // get value from text field purchase = parseFloat(purchase). // convert to float var dayOfWeek = new Date();getDay(); var rate. if (purchase < 50) { rate = 0;06, } else if (purchase < 100 && dayOfWeek ==(2.3)) { rate = 0;06. } else if (purchase < 1000) { rate = 0;025. } else { rate = 0;03; } let discount = purchase * rate; let output = purchase - discount. document.getElementById("output");innerText = output; // set discont into your output div return output: } </script> </head> <body> Please enter your final price? <input type="text" id="purchase" size="5"><be> <button type="button" onclick="getDiscountedAmount()">discount?</button> <div id="output"></div> </body> </html>
我没有更改您的退货单和dayOfWeek ，因为我不知道您到底想如何使用它。
我最初尝试使默认路由在ember中工作时会丢失什么？
[英]What am I missing from my initial attempt at getting default routes to work in ember?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.