我想寫一段代碼，我希望所有輸入的總和為100。因此，假設如果用戶在股票中輸入40%，那么我不希望用戶在接下來的外匯或任何其他輸入中輸入超過60%。同樣，如果他在外匯中輸入20%，那么總和為60，所以他不會在接下來的兩個輸入（商品和加密貨幣）中輸入超過40%。我在第一條評論中附上謎題鏈接。
<!DOCTYPE html>
<html lang="en"/span>>
<head>/span>
<meta charset="UTF-8">/span>
< meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=devicewidth, initial-scale=1. 0">
<title>庫存經理</title>/span>
</head>/span>
<style>
input {
width: 30%;
}
</style>>
<body>
<h3> 庫存經理</h3>
< form id="myForm" action="#" onsubmit=" validateForm()" >
<label for="Stocks"/span>> Stocks</label><br>
< input type="number" name="Stocks" id="Stocks" placeholder="Enter Stock %" min="1"/span> max="100"/span>> <br><br>
<label for="Forex"/span>> Forex</label><br>/span>
< input type="number" name="Forex" id="Forex" placeholder="Enter Forex %" min="1"/span> max="100"/span>> <br><br>
<label for="Commodities"/span>> 商品</label><br>
< input type="number" name="Commodities" id="Commodities" placeholder="Enter Commodities %" min="1" min="1"
max="100">< br><br>
<label for="Crypto"/span>> Crypto </label><br>
< input type="number" name="Crypto" id="Crypto" placeholder="Enter Crypto %" min="1"/span> max="100"/span>> <br><br>
<button id="submit"> 提交</button>。
</form>/span>
<script src=" 。 /main.js"></script>/span>
</body>
</html>
函式 validateForm(e) {
const Stocks = document.forms["myForm"]["Stocks"].value。
const Forex = document.forms["myForm"]["Forex"].value;
const Commodities = document.forms["myForm"]["Commodities"].value;
const Crypto = document.forms["myForm"]["Crypto"].value;
console.log('output', Stocks, Forex, Commodities, Crypto)
const totalPercentage = 100
}
uj5u.com熱心網友回復：
在我看來，這里面有兩個任務。在提交時對表單進行驗證，以及計算從輸入的數字中推匯出的總和。
如果表單只能在任何/所有輸入的總和正好是100時才能成功提交，那么sum===100就可以了，否則如果它可能小于100，那么在下面的validateform函式中將其改為sum <= 100。
要想在用戶輸入數字時進行限制，就會稍微有點麻煩，因為你需要跟蹤所有的輸入值并實時得出總和--我在下面選擇了在當前總和超過100時警告用戶，你會在代碼段中看到。
。const validateForm=（event）=>{
let sum=0;
Array.from( document. querySelectorAll('[type="number"]') )。 forEach(input=>/span>{
sum =Number( input.value ) 。
});
console.log( 'Current sum: %d'/span>, sum )。
return sum===100。
};
let tx=NaN;
let obj={};
Array.from( document. querySelectorAll('[type="number"]') )。 forEach( input=>input。 addEventListener('input',(e) =>{
if( !obj.hasOwnProperty(e.target. name) ) obj[e.target.name] =true。
obj[e.target.name]=e.target.value。
let sum=Object.values( obj ) 。 reduce( (a,b)=>Number( a ) Number( b )> ) 。
if( sum > 100 ){
console.log('Whoah there cowboy！')。
obj[e.target.name]=0;
warn（e.target）。
return false;
}
}));
const warn=（n）=>{
n.classList.add(' warn')。
if( !isNaN( tx )) clearTimeout( tx )。
setTimeout(()=>/span>{
n.classList.remove(' warn')。
n.value='。
},1500）。)
}input{padding:0.25rem; }
. warn{background: rgba(255,0,0, 0。 25);border:1px solid red;}< form method='post' onsubmit='return validateForm（event）'>
<label for='Stocks'> Stocks
< 輸入 型別='number' 名稱='Stocks' placeholder='Enter Stock %' min='1' max='100' />。
</label>
<label for='Forex'>/span>Forex
< input type='number' name='Forex' placeholder='Enter Forex %' min='1' max='100' />
</label>
<label for='Commodities'>/span>商品
< input type='number' name='Commodities' placeholder='Enter Commodities %' min='1' max='100' />
</label>
<label for='Crypto'>/span>Crypto
< 輸入 型別='number' 名稱='Crypto' placeholder='Enter Crypto %' min='1' max='100' />
</label>
<input type='submit'/span> />
</form>/span>uj5u.com熱心網友回復：
你可以做一件事。
。setInterval(function() {
var input1 = document.getElementById('Stocks') 。
var input2 = document.getElementById('Forex') 。
var input3 = document.getElementById('Commodities') 。
var input4 = document.getElementById('Crypto') 。
var tot = 0;
if (input1.value != " ") {
tot = tot parseInt（input1.value）。
if (tot > 100) {
alert('invalid percentile sum of all fields must not be greater then 100'/span>)。
input1.value = ""。
}
//console.log(tot);; }
if (tot == 100) {
if (input2.value == " ") {
input2.disabled = true;
}
if (input3.value == " ") {
input3.disabled = true;
}
if (input4.value == " ") {
input4.disabled = true;
}
} else {
input2.disabled = false;
input3.disabled = false;
input4.disabled = false;
}
}
if (input2.value != " ") {
tot = tot parseInt（input2.value）。
if (tot > 100) {
alert('invalid percentile sum of all fields must not be greater then 100'/span>)。
input2.value = ""。
}
//console.log(tot);; }
if (tot == 100) {
if (input1.value == " ") {
input1.disabled = true;
}
if (input3.value == " ") {
input3.disabled = true;
}
if (input4.value == " ") {
input4.disabled = true;
}
} else {
input1.disabled = false;
input3.disabled = false;
input4.disabled = false;
}
}
if (input3.value != " ") {
tot = tot parseInt（input3.value）。
if (tot > 100) {
alert('invalid percentile sum of all fields must not be greater then 100'/span>)。
input3.value = ""。
}
//console.log(tot);; }
if (tot == 100) {
if (input1.value == " ") {
input1.disabled = true;
}
if (input2.value == " ") {
input2.disabled = true;
}
if (input4.value == " ") {
input4.disabled = true;
}
} else {
input1.disabled = false;
input2.disabled = false;
input4.disabled = false;
}
}
if (input4.value != " ") {
tot = tot parseInt（input4.value）。
if (tot > 100) {
alert('invalid percentile sum of all fields must not be greater then 100'/span>)。
input4.value = ""。
}
//console.log(tot);; }
if (tot == 100) {
if (input1.value == " ") {
input1.disabled = true;
}
if (input3.value == " ") {
input3.disabled = true;
}
if (input2.value == " ") {
input2.disabled = true;
}
} else {
input1.disabled = false;
input3.disabled = false;
input2.disabled = false;
}
}
}, 1000); /這里的1000是毫秒，其中1000毫秒=1秒，所以函式將每秒執行。<! DOCTYPE html>
<html style="background-color: black;">
<head>
<title>My Portfolio</title>
<style>
#navigation-bar {
background-color: black;
color: gray;
font-weight: bold;
font-family: Script;
font-size: 25px;
}
</style>>
</head>
<body>
<center>
<label for="Stocks"/span>> Stocks</label><br>
< input type="number" name="Stocks" id="Stocks" placeholder="Enter Stock %" min="1"/span> max="100"/span>> <br><br>
<label for="Forex"/span>> Forex</label><br>/span>
< input type="number" name="Forex" id="Forex" placeholder="Enter Forex %" min="1"/span> max="100"/span>> <br><br>
<label for="Commodities"/span>> 商品</label><br>
< input type="number" name="Commodities" id="Commodities" placeholder="Enter Commodities %" min="1"/span> max="100"/span>> <br><br>
<label for="Crypto"/span>> Crypto </label><br>
< input type="number" name="Crypto" id="Crypto" placeholder="Enter Crypto %" min="1"/span> max="100"/span>> <br><br>
</center>/span>
</body>/span>
</html>/span>希望這對你一定有幫助
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/328676.html
標籤：