如何改变<input>如果用户输入的值小于指定值，则标记值将设为默认值？
[英]How to change <input> tag value to default if user enters less than specified value?
问题描述
In my HTML form, there are 3 input tags.
在我的 HTML 表单中，有 3 个输入标签。 The type of input tag has been set to number.输入标签的类型已设置为数字。 The form is working well for calculating sum of 3 inputs.该表格适用于计算 3 个输入的总和。
But the problem arises when user enters negative values in input.但是当用户在输入中输入负值时就会出现问题。 Therefore, I want my code to change values entered in input tag to default of those where user has entered a value less than 0. The action should be performed when input type="button" is clicked.因此，我希望我的代码将 input 标签中输入的值更改为用户输入的值小于 0 的默认值。单击 input type="button"时应执行该操作。
Here is my code:这是我的代码：
<HTML> <head><title>Calculation</title> </head> <body> <form> PE Ratio <input type="number" id="PE" /><br> ROCE <input type="number" id="ROCE" /><br> Sales Growth <input type="number" id="SG" /> <br> <input type="button" Value="Multiply" style="height: 30px; width: 150px; left: 250; top: 250;" onsubmit="return false" onclick="amount.value = (15 -( PE.valueAsNumber/2)) + (40 - (ROCE.valueAsNumber)) + (10-(SG.valueAsNumber))"> <p>Rating: <div id="div1"> <strong><output name="amount" for="hours rate vat">0</output></strong></div> </p> </form> </body> </HTML>
for (PE) ID input, default value is 7 for (ROCE) ID input, default value is 5 for ( SG) id input, dafault value is 4对于（PE）ID输入，默认值为7（ROCE）ID输入，默认值为5（SG）ID输入，默认值为4
I am not sure how should I do this.我不知道我该怎么做。
3 个解决方案
解决方案1
0 2018-12-28 20:06:44
How I will do it is First make a javascript file like abc.js write the following code in it我将如何做首先制作一个像 abc.js 这样的 javascript 文件，在其中写入以下代码
function corrector(){
var x = document.getElementById("PE").value;
var y = document.getElementById("ROCE").value;
var z = document.getElementById("SG").value;
if(x<0)
x=7;
if(y<0)
y=5;
if(z<0)
z=4;
}
Now include the js file in the main html file Include the rest of the logic in this js file only.现在将 js 文件包含在主 html 文件中 仅在此 js 文件中包含其余逻辑。
<input type="button" Value="Multiply" style="height: 30px; width: 150px; left: 250;
top: 250;" onsubmit="return false" onclick="corrector()">
解决方案2
0 2018-12-28 20:25:33
It helps to separate out your code from your markup - I moved the onclick logic to a calculate function which does the validation you want.它有助于将您的代码与您的标记分开 - 我将onclick逻辑移动到一个calculate函数，该函数执行您想要的验证。 I also simplified your math.我也简化了你的数学。
function calculate() { const defaults = {PE: 7, ROCE: 5, SG: 4}; const values = {}; Object.keys(defaults).forEach(id => { const el = document.getElementById(id); if (el.value < 0) { el.value = defaults[id]; } values[id] = el.value; }); document.getElementsByName('amount')[0].value = 65 - values.PE/2 - values.ROCE - values.SG }
<HTML> <head><title>Calculation</title> </head> <body> <form> PE Ratio <input type="number" min="0" id="PE" /><br> ROCE <input type="number" id="ROCE" /><br> Sales Growth <input type="number" id="SG" /> <br> <input type="button" Value="Multiply" style="height: 30px; width: 150px; left: 250; top: 250;" onsubmit="return false" onclick="calculate()"> <p>Rating: <div id="div1"> <strong><output name="amount" for="hours rate vat">0</output></strong></div> </p> </form> </body> </HTML>
解决方案3
0 2018-12-28 20:39:25
You can't do that when all your code is thrown into an HTML form.当您的所有代码都被放入一个 HTML 表单时，您就无法做到这一点。 I removed the form (if you really need it, tell me and I'll change the code).我删除了表单（如果您真的需要它，请告诉我，我会更改代码）。 I also changed your form code into simpler JavaScript code.我还将您的表单代码更改为更简单的 JavaScript 代码。
I made it so that you can just copy & paste the code into one script.我这样做是为了您只需将代码复制并粘贴到一个脚本中即可。
If something doesn't work the way you want to.如果某些事情没有按照您想要的方式工作。 Let me know.让我知道。
<HTML> <head> <title>Calculation</title> </head> <body> PE Ratio <input type="number" id="PE" /><br> ROCE <input type="number" id="ROCE" /><br> Sales Growth <input type="number" id="SG" /> <br> <button onsubmit="return false" onclick="Multiply()" style="height: 30px; width: 150px; left: 250; top: 250;" onsubmit="return false">Multiply</button> <p>Rating</p> <b id="output">0</b> </body> <script> var output = document.getElementById("output"); function Multiply() { var a = isNaN(PE.valueAsNumber) ? 7 : PE.valueAsNumber; var b = isNaN(ROCE.valueAsNumber) ? 5 : ROCE.valueAsNumber; var c = isNaN(SG.valueAsNumber) ? 4 : SG.valueAsNumber; if (PE.valueAsNumber < 0 || SG.valueAsNumber < 0 || ROCE.valueAsNumber < 0) output.innerHTML = "No negetive numbers" else output.innerHTML = 15 - a / 2 + 40 - b + 10 - c; } </script> </HTML>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.