Как вывести число, введенное в поле ввода, на страницу внутри тега \<p>?

Как я могу корректно получать числа со всех кнопок с классом "Spin_options_btn_div" и умножать их на значение, введенное пользователем в поле ввода? В результате должно выводиться произведение только для кнопки, на которой установлен класс "red_border", но у меня появляется "NaN", когда я выбираю кнопку и ввожу число в поле ввода. Как можно исправить эту проблему?
  • 21 марта 2024 г. 21:59
Ответы на вопрос 1
Для вывода числа, введенного в поле ввода, на страницу внутри тега \<p> можно использовать следующий код на JavaScript:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Number Input</title>
</head>
<body>
<input type="number" id="inputNumber">
<button onclick="displayNumber()">Display Number</button>
<p id="outputNumber"></p>

<script>
function displayNumber() {
    const input = document.getElementById("inputNumber");
    const output = document.getElementById("outputNumber");
    output.textContent = input.value;
}
</script>
</body>
</html>
```

Для умножения чисел со всех кнопок с классом "Spin_options_btn_div" на значение, введенное пользователем в поле ввода и вывода результата только для кнопки с классом "red_border", можно использовать следующий код на JavaScript:

```javascript
const buttons = document.querySelectorAll(".Spin_options_btn_div");

buttons.forEach(button => {
    button.addEventListener("click", function() {
        if (this.classList.contains("red_border")) {
            const input = document.getElementById("inputNumber");
            const inputValue = parseFloat(input.value);
            const buttonText = parseFloat(this.textContent);
            const result = inputValue * buttonText;
            console.log(result); // Вывод результата в консоль, можно также выводить на страницу
        }
    });
});
```

Проблема с "NaN" может возникать из-за того, что вы не корректно преобразовываете значения из поля ввода и текст кнопки в числа. Убедитесь, что используете parseFloat или parseInt для преобразования значений в числа. Также убедитесь, что значения чисел корректно расположены в тексте кнопок, чтобы их можно было успешно извлечь.
Похожие вопросы