Lấy số từ input người dùng và hiển thị trong Console JavaScript

Cách lấy giá trị từ <input>, chuyển thành số, và log ra console.

Ví dụ minh họa

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Get Number Input</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; max-width: 500px; }
    .container { background: #f8f9fa; padding: 20px; border-radius: 8px; }
    label { display: block; margin-bottom: 8px; font-weight: 500; }
    input { width: 100%; padding: 10px; font-size: 16px; box-sizing: border-box; margin-bottom: 15px; }
    button { width: 100%; padding: 12px; font-size: 16px; background: #333; color: white; border: none; border-radius: 4px; cursor: pointer; }
    button:hover { background: #555; }
    #output { margin-top: 15px; padding: 10px; background: #e8f5e9; border-radius: 4px; font-family: monospace; }
    .console-hint { font-size: 12px; color: #666; margin-top: 10px; }
  </style>
</head>
<body>
  <h1>Lấy số từ Input & Hiển thị Console</h1>
  <div class="container">
    <p><strong>Ví dụ:</strong> Chọn số 1-100</p>
    <form onsubmit="return false;">
      <div class="form-group">
        <label for="inputNumber">Nhập số:</label>
        <input id="inputNumber" type="number" min="1" max="100" placeholder="1-100" />
      </div>
    </form>
    <button id="choose">Click Me</button>
    <p id="output"></p>
    <p class="console-hint">Mở DevTools (F12) → Tab Console để xem log</p>
  </div>
  
  <script>
    const btn = document.querySelector("#choose");
    const inputNumber = document.querySelector("#inputNumber");
    const output = document.querySelector("#output");
    const randomNumber = Math.ceil(Math.random() * 100);
    
    btn.addEventListener("click", () => {
      const givenNumber = inputNumber.value; // String
      const valueInt = parseInt(givenNumber, 10); // Chuyển sang số (base 10)
      
      // Validation
      if (givenNumber === "") {
        output.innerHTML = "⚠️ Vui lòng nhập số!";
        return;
      }
      if (isNaN(valueInt)) {
        output.innerHTML = "❌ Không phải số hợp lệ!";
        return;
      }
      if (valueInt < 1 || valueInt > 100) {
        output.innerHTML = "❌ Số phải từ 1-100!";
        return;
      }
      
      // Log ra Console (F12)
      console.log("Random number:", randomNumber);
      console.log("User input (string):", givenNumber);
      console.log("User input (number):", valueInt);
      console.log("Match:", randomNumber === valueInt ? "🎉 TRÚNG!" : "❌ Sai");
      
      // Hiển thị trên UI
      output.innerHTML = `
        Random: ${randomNumber}

        Bạn nhập: ${valueInt}

        ${randomNumber === valueInt ? "🎉 TRÚNG!" : "❌ Sai, thử lại"}
      `;
    });
    
    // Enter key support
    inputNumber.addEventListener('keypress', (e) => {
      if (e.key === 'Enter') btn.click();
    });
  </script>
</body>
</html>

Kết quả

Nhập số → Nhấn "Click Me" → Hiển thị kết quả trên UI VÀ log chi tiết ra Console (F12).

Các cách parse số:

Validation số an toàn:

function parseNumberSafe(str) {
  const num = Number(str);
  return Number.isFinite(num) ? num : null;
}

// Hoặc dùng input type=number (browser validate)

Mở Console:

• Chrome/Edge/Firefox: F12 hoặc Ctrl+Shift+J (Win) / Cmd+Option+J (Mac)
• Tab Console
• Log: console.log(), console.error(), console.warn(), console.table()