Question

在我的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

我不确定该怎么做。

Answer 1

我将如何做首先制作一个像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()">

Answer 2

这有助于从标记中分离出代码-我将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>

Answer 3

将所有代码都放入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>

如果用户输入的值小于指定的值，如何将<input />标记值更改为默认值？

3 个答案: