Вывод, не отображающий на мобильном телефоне [закрыто] ⇐ Javascript

[Anonymous]

Студент первого курса здесь. Групповой проект. Это работает так, как это должно, но когда я отправил своему партнеру по назначению файл, кнопка не работает. Ничего не отображается.
отлично работает на рабочем столе, даже с тем, что экран, становленный меньше.




Child Support Calculator




body {
font-family: 'Inter', sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.container {
max-width: 500px;
width: 90%;
background-color: #ffffff;
border-radius: 1rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
padding: 2rem;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.input-group label {
display: block;
font-weight: 600;
margin-bottom: 0.5rem;
color: #374151;
}
.input-group input, .input-group select {
width: 100%;
padding: 0.75rem;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
font-size: 1rem;
color: #4b5563;
}
.input-group input:focus, .input-group select:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}
.btn {
background-color: #2563eb;
color: #ffffff;
font-weight: 600;
padding: 0.85rem 1.5rem;
border-radius: 0.5rem;
text-align: center;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
border: none;
font-size: 1rem;
}
.btn:hover {
background-color: #1d4ed8;
}
.result-box {
background-color: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: 0.5rem;
padding: 1rem;
text-align: center;
font-size: 1.125rem;
font-weight: 600;
color: #1e40af;
min-height: 3rem; /* Ensure consistent height */
display: flex;
justify-content: center;
align-items: center;
}
.error-message {
color: #dc2626;
font-size: 0.875rem;
text-align: center;
}




Child Support Calculator


Adjusted Gross Income (Monthly)


Number of Children

1 Child
2 Children
3 Children
4 Children
5+ Children


Calculate Support




document.addEventListener('DOMContentLoaded', function() {
const adjustedGrossIncomeInput = document.getElementById('adjustedGrossIncome');
const numberOfChildrenSelect = document.getElementById('numberOfChildren');
const calculateBtn = document.getElementById('calculateBtn');
const resultDiv = document.getElementById('result');
const errorMessageDiv = document.getElementById('errorMessage');

const supportPercentages = {
'1': 0.14, // 14% for 1 child
'2': 0.20, // 20% for 2 children
'3': 0.22, // 22% for 3 children
'4': 0.24, // 24% for 4 children
'5': 0.26 // 26% for 5 or more children
};

/**
* Calculates the estimated child support based on guidelines.
* @param {number} income - The adjusted gross income (monthly).
* @param {number} childrenCount - The number of children.
* @returns {number} The estimated monthly child support amount.
*/
function calculateChildSupport(income, childrenCount) {
if (income < 0) {
return 0; // Income cannot be negative
}

let percentage;
if (childrenCount >= 5) {
percentage = supportPercentages['5']; // Use 26% for 5 or more
} else {
percentage = supportPercentages[childrenCount.toString()];
}

if (percentage === undefined) {
return 0; // Should not happen with valid input, but as a safeguard
}

return income * percentage;
}

// Event listener for the calculate button
calculateBtn.addEventListener('click', function() {
const income = parseFloat(adjustedGrossIncomeInput.value);
const children = parseInt(numberOfChildrenSelect.value, 10);

// Input validation for valid positive income
if (isNaN(income) || income < 0) {
errorMessageDiv.textContent = 'Please enter a valid positive adjusted gross income.';
errorMessageDiv.classList.remove('hidden');

return;
}

const estimatedSupport = calculateChildSupport(income, children);

// Display the result
if (estimatedSupport >= 0) {
resultDiv.textContent = `Estimated Monthly Support: $${estimatedSupport};
}
});

// Optional: Clear error message when input changes
adjustedGrossIncomeInput.addEventListener('input', function() {
if (!errorMessageDiv.classList.contains('hidden')) {
errorMessageDiv.classList.add('hidden');
}
});
});




< /code>
Я ожидал, что она отобразит сумму, как и на рабочем столе. Или наш код отключен?

Подробнее здесь: https://stackoverflow.com/questions/797 ... -on-mobile