我正在構建一個 Web 專案，它將執行各種排序演算法來對陣列進行排序。為此，我想從用戶那里獲取陣列大小的輸入以及用戶對輸入大小的陣列元素的輸入。我的代碼沒有得到預期的結果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="screen-body-item">
<div class="app-form">
<div class="app-form-group">
<input type="text" class="app-form-control" placeholder="enter size" id="size">
<input type="text" class="app-form-control" placeholder="enter element" id="ele">
<input type="button" value="" value="add value" class="app-form-button" onclick="addval()">
</div>
</div>
</div>
</div>
<script>
function addval() {
var inputArray = [];
let size = document.getElementById('size').value;
for (var i = 0; i < size; i ) {
inputArray[i] = document.getElementById('ele').value;
}
}
</script>
</body>
</html>
uj5u.com熱心網友回復：
您正在迭代inputArray，但其中沒有任何元素。您必須首先用專案填充它。
在這種情況下，我們可以簡化代碼，使用Array函式創建具有一定數量Array.fill項的陣列，并將陣列中的每個項設定為指定值：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="screen-body-item">
<div class="app-form">
<div class="app-form-group">
<input type="text" class="app-form-control" placeholder="enter size" id="size">
<input type="text" class="app-form-control" placeholder="enter element" id="ele">
<input type="button" value="" value="add value" class="app-form-button" onclick="addval()">
</div>
</div>
</div>
<script>
function addval() {
let size = document.getElementById('size').value;
let value = document.getElementById('ele').value;
var inputArray = Array( size).fill(value)
console.log(inputArray)
}
</script>
</body>
</html>uj5u.com熱心網友回復：
這段代碼看起來有點長，因為我有 wirten 函式可以在輸入中只輸入數字和空格元素。并添加了一些過濾器。
請試試你自己這個代碼。如果您有不明白的地方，請在下面寫評論，我很高興向某人解釋。
請注意：用戶只能在輸入中輸入數字。
let sizeInput = document.querySelector('#size');
let eleInput = document.querySelector('#ele');
// allow only numbers to type
[eleInput, sizeInput].forEach(input=>{
input.addEventListener('keypress', function(event){
event.preventDefault();
let value = parseInt(event.key);
if(!isNaN(value)) return input.value = value;
if(input == eleInput && event.key == ' ') return input.value = event.key;
});
});
// main function
function addval(event) {
event?.preventDefault(); // if button is in form element
let inputArray = [];
let size = parseInt(sizeInput.value);
let elements = eleInput.value;
if(isNaN(size)) return alert('Please enter valid size.'); // stop and show alert if size is invalid or empty
elements = elements.trim(); // remove space from starting and end
elements = elements.replace(/ /g, ' '); // remove multiple spaces
elements = elements.split(' '); // split by space
if(elements.length != size) return alert(`Please enter ${size < elements.length ? 'only': ''} ${size} elements`);
inputArray = elements;
console.log(inputArray); // remove later
return inputArray;
}<input type="text" class="app-form-control" placeholder="enter size" id="size">
<input type="text" class="app-form-control" placeholder="enter element" id="ele">
<input type="button" value="add value" class="app-form-button" onclick="addval()">轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/318147.html
標籤：javascript 数组 dom 网络开发服务器