История изменений
Исправление Ygor, (текущая версия) :
Казалось бы простой вопрос, не могу найти решения.
НЯ!
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Умножение чисел</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
input, button {
padding: 8px;
margin: 5px 0;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
.error {
color: red;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Умножение числа</h1>
<p>Введите число, и оно будет умножено на 1, 2, 3, 4:</p>
<input type="text" id="numberInput" placeholder="Введите число">
<button onclick="calculate()">Рассчитать</button>
<div id="error" class="error"></div>
<table id="resultsTable">
<thead>
<tr>
<th>Множитель</th>
<th>Результат</th>
</tr>
</thead>
<tbody id="tableBody">
<!-- Результаты будут здесь -->
</tbody>
</table>
<script>
function calculate() {
const input = document.getElementById('numberInput').value;
const errorElement = document.getElementById('error');
const tableBody = document.getElementById('tableBody');
// Очищаем предыдущие результаты и ошибки
errorElement.textContent = '';
tableBody.innerHTML = '';
// Проверяем, что введено число
if (input === '' || isNaN(input)) {
errorElement.textContent = 'Пожалуйста, введите корректное число!';
return;
}
const number = parseFloat(input);
// Умножаем число на 1, 2, 3, 4 и добавляем в таблицу
for (let i = 1; i <= 4; i++) {
const result = number * i;
const row = document.createElement('tr');
const multiplierCell = document.createElement('td');
multiplierCell.textContent = i;
const resultCell = document.createElement('td');
resultCell.textContent = result;
row.appendChild(multiplierCell);
row.appendChild(resultCell);
tableBody.appendChild(row);
}
}
// Добавляем обработчик нажатия Enter в поле ввода
document.getElementById('numberInput').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
calculate();
}
});
</script>
</body>
</html>
Исходная версия Ygor, :
Казалось бы простой вопрос, не могу найти решения.
НЯ!
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Умножение чисел</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
input, button {
padding: 8px;
margin: 5px 0;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
.error {
color: red;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Умножение числа</h1>
<p>Введите число, и оно будет умножено на 1, 2, 3, 4:</p>
<input type="text" id="numberInput" placeholder="Введите число">
<button onclick="calculate()">Рассчитать</button>
<div id="error" class="error"></div>
<table id="resultsTable">
<thead>
<tr>
<th>Множитель</th>
<th>Результат</th>
</tr>
</thead>
<tbody id="tableBody">
<!-- Результаты будут здесь -->
</tbody>
</table>
<script>
function calculate() {
const input = document.getElementById('numberInput').value;
const errorElement = document.getElementById('error');
const tableBody = document.getElementById('tableBody');
// Очищаем предыдущие результаты и ошибки
errorElement.textContent = '';
tableBody.innerHTML = '';
// Проверяем, что введено число
if (input === '' || isNaN(input)) {
errorElement.textContent = 'Пожалуйста, введите корректное число!';
return;
}
const number = parseFloat(input);
// Умножаем число на 1, 2, 3, 4 и добавляем в таблицу
for (let i = 1; i <= 4; i++) {
const result = number * i;
const row = document.createElement('tr');
const multiplierCell = document.createElement('td');
multiplierCell.textContent = i;
const resultCell = document.createElement('td');
resultCell.textContent = result;
row.appendChild(multiplierCell);
row.appendChild(resultCell);
tableBody.appendChild(row);
}
}
// Добавляем обработчик нажатия Enter в поле ввода
document.getElementById('numberInput').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
calculate();
}
});
</script>
</body>
</html>