HTML 透過文字輸入框控制圖片顯示數量

需求

使用者在文字框輸入數字，頁面動態顯示對應數量的圖片。

實作步驟

1. 文字框 <input type="text" id="numInput">。
2. 容器 <div id="imgContainer"></div>。
3. 監聽 input 事件，讀取值並生成圖片。

完整代碼

<input type="text" id="numInput" placeholder="輸入圖片數量">
<div id="imgContainer"></div>

<script>
document.getElementById('numInput').addEventListener('input', function() {
    var n = parseInt(this.value) || 0;
    var container = document.getElementById('imgContainer');
    container.innerHTML = '';
    for (var i = 0; i < n; i++) {
        var img = document.createElement('img');
        img.src = 'https://via.placeholder.com/100'; // 範例圖片
        img.style.margin = '5px';
        container.appendChild(img);
    }
});
</script>

進階：限制最大數量、驗證輸入

var n = Math.min(Math.max(parseInt(this.value) || 0, 0), 50); // 限制 0-50