Результат не отображается в поле результатаCSS

Разбираемся в CSS
Ответить
Anonymous
 Результат не отображается в поле результата

Сообщение Anonymous »

Я создал прототип веб-приложения, используя фреймворк flask, который состоит из текстового ввода двух значений int, за которым следует выбор операции, и поля результата. Вы вводите число в два поля ввода, выбираете операцию и получаете результат, довольно простой, потому что я только начинаю.
поле результата пусто
результат должен быть показан

Код: Выделить всё

{% extends "base.html" %}

{% block h1 %}
a sum
{% endblock %}

{% block style %}

input:out-of-range {
color: red;
}

select, input[type="text"] {
width: 100%;
box-sizing: border-box;
}

input::placeholder {
color: gray;
font-style: italic;
}

.error-background {
background-color: #ffcccc; /* Light red color */
}

.error-message {
color: red;
}

{% endblock %}

{% block content %}

[b]Number 1:[/b]



[b]Number 2:[/b]




Subtraction


Addition

[b]Result:[/b] [b][/b]



{% endblock %}
это HTML

Код: Выделить всё

document.addEventListener('DOMContentLoaded', function () {
const firstNumberInput = document.getElementById('first_number');
const secondNumberInput = document.getElementById('second_number');
const resultElement = document.getElementById('result');
const errorMessage = document.getElementById('error_message');

firstNumberInput.addEventListener('input', calculateResult);
secondNumberInput.addEventListener('input', calculateResult);

function calculateResult() {
const firstValue = parseInt(firstNumberInput.value);
const secondValue = parseInt(secondNumberInput.value);
const buttons = document.querySelectorAll('input[name="conta_mat"]');

if (!isNaN(firstValue + secondValue)) {

for (const button of buttons) {
if (button.checked) {
if (button.value === 'subtraction') {
resultElement.innerText = `${firstValue - secondValue}`;

} else if (button.value === 'addition') {
resultElement.innerText = `${firstValue + secondValue}`;
}
errorMessage.textContent = '';
}
}
} else {
resultElement.textContent = '';
errorMessage.textContent = 'Please enter valid numbers and select an operation.';
}
}
});

это сценарий
как мне это решить?

Подробнее здесь: https://stackoverflow.com/questions/772 ... sult-field
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»