Nhận số từ đầu vào của người dùng và hiển thị trong bảng điều khiển với JavaScript

Bạn có thể sử dụng # để nhận giá trị khi người dùng nhấp vào nút bằng document.querySelector (“”); Sau đây là mã JavaScript -

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="container container-fluid">
<p><strong> Example:</strong> choose a number between 1 to 100</p>
<form>
<div class="form-group">
<label for="number">Give a number:</label>
<input id="inputNumber" value="" type="text" name="number" />
</form>
<p id="output"></p>
</div>
<button class="btn btn-dark" id="choose" type="submit">Click Me</button>
</body>
<script>
   function example() {
      let btn = document.querySelector("#choose");
      let randomNumber = Math.ceil(Math.random() * 100);
      btn.onclick = function() {
         let givenNumber = document.querySelector("#inputNumber").value;
         let valueInt = parseInt(givenNumber, 100);
         console.log(randomNumber, givenNumber);
      };
   }
   example();
</script>
</html>

Để chạy chương trình trên, hãy lưu tên tệp anyName.html (index.html) và nhấp chuột phải vào tệp và chọn tùy chọn mở bằng máy chủ trực tiếp trong trình chỉnh sửa mã VS.

Đầu ra

Nhận số từ đầu vào của người dùng và hiển thị trong bảng điều khiển với JavaScript

Thêm giá trị -

Nhận số từ đầu vào của người dùng và hiển thị trong bảng điều khiển với JavaScript

Khi nhấp vào nút Nhấp vào tôi, điều tương tự cũng hiển thị trong Bảng điều khiển -

Nhận số từ đầu vào của người dùng và hiển thị trong bảng điều khiển với JavaScript