如何通过按钮获取用户输入，实现指定次数的内容批量展示（原生JS）

Got it! Let's tackle this with plain vanilla JavaScript—no external libraries required. I've put together a complete implementation that takes your input content and repeats it exactly how many times you specify. Here's the full code breakdown:

HTML Structure #

First, we'll set up the input areas and a container to display the repeated content:

<div class="container">
  <div class="input-section">
    <label for="bodyInput">内容盒子内容:</label>
    <textarea id="bodyInput" placeholder="输入你要重复的内容..."></textarea>
    
    <label for="qtyInput">重复次数:</label>
    <input type="number" id="qtyInput" min="0" value="1">
    
    <button id="generateBtn">生成重复内容</button>
  </div>
  
  <div class="result-section">
    <h3>展示结果:</h3>
    <div id="resultContainer"></div>
  </div>
</div>

CSS Styling #

Let's add some basic styling to make it look clean and match typical mockup expectations:

.container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.input-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

textarea, input[type="number"] {
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

textarea {
  min-height: 100px;
}

button {
  padding: 0.8rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s;
}

button:hover {
  background-color: #0056b3;
}

.result-section {
  border-top: 1px solid #eee;
  padding-top: 2rem;
}

.content-box {
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 1rem;
  background-color: #f9f9f9;
}

JavaScript Logic #

This is where the magic happens—we'll handle user input and generate the repeated content boxes:

// Grab all the DOM elements we need
const bodyInput = document.getElementById('bodyInput');
const qtyInput = document.getElementById('qtyInput');
const generateBtn = document.getElementById('generateBtn');
const resultContainer = document.getElementById('resultContainer');

// Function to generate repeated content boxes
function generateRepeatedContent() {
  // Get and clean up user input
  const content = bodyInput.value.trim();
  const quantity = parseInt(qtyInput.value);
  
  // Clear previous results first
  resultContainer.innerHTML = '';
  
  // Handle edge cases: empty content or invalid quantity
  if (!content || isNaN(quantity) || quantity < 1) {
    return;
  }
  
  // Loop to create the requested number of content boxes
  for (let i = 0; i < quantity; i++) {
    const contentBox = document.createElement('div');
    contentBox.classList.add('content-box');
    // Use textContent for plain text (safer, no XSS risk)
    contentBox.textContent = content;
    // If you want to allow HTML rendering, replace the line above with:
    // contentBox.innerHTML = content;
    resultContainer.appendChild(contentBox);
  }
}

// Bind events: trigger on button click
generateBtn.addEventListener('click', generateRepeatedContent);

// Optional: Update results in real-time as quantity changes
qtyInput.addEventListener('input', generateRepeatedContent);

Key Details & Optimizations #

• Edge Case Handling: We check for empty content or invalid quantities (like 0 or non-numbers) to avoid generating empty boxes or errors.
• Safety First: Using textContent ensures user input is treated as plain text, preventing XSS attacks. If you need to allow HTML (like formatted text), switch to innerHTML—just be cautious if this is for a public-facing site.
• Real-Time Updates: The optional input event listener on the quantity box lets users see changes immediately without clicking the button.
• Style Flexibility: The content-box class makes it easy to tweak the look of each repeated box via CSS to match your mockup exactly.

内容的提问来源于stack exchange，提问作者Java Drinker