在我的HTML表单中,有3个输入标签。输入标签的类型已设置为数字。该表格适用于计算3个输入的总和。
但是,当用户在输入中输入负值时,就会出现问题。因此,我希望我的代码将输入标签中输入的值更改为用户输入的值小于0的默认值。单击输入type="button"
时应执行该操作。
这是我的代码:
<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>
对于(PE)ID输入,默认值为7 对于(ROCE)ID输入,默认值为5 对于(SG)id输入,dafault值为4
我不确定该怎么做。
答案 0 :(得分:0)
我将如何做 首先制作一个像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;
}
现在将js文件包含在主html文件中 仅在此js文件中包含其余逻辑。
<input type="button" Value="Multiply" style="height: 30px; width: 150px; left: 250;
top: 250;" onsubmit="return false" onclick="corrector()">
答案 1 :(得分:0)
这有助于从标记中分离出代码-我将onclick
逻辑移到了calculate
函数中,该函数可以进行所需的验证。我还简化了你的数学。
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>
答案 2 :(得分:0)
将所有代码都放入HTML表单时,您将无法执行此操作。我删除了表单(如果您确实需要它,请告诉我,我将更改代码)。我还将您的表单代码更改为更简单的JavaScript代码。
我做到了,这样您就可以将代码复制并粘贴到一个脚本中。
如果某些方法无法按照您想要的方式工作。让我知道。
<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>