Calculadora De Hipotecas

Calculadora de Hipotecas: Calcula tu Cuota Mensual :root { –primary-color: #004a99; –background-color: #f8f9fa; –card-background: #ffffff; –text-color: #333; –border-color: #ddd; –shadow-color: rgba(0, 0, 0, 0.1); –input-border-color: #ccc; –error-color: #dc3545; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(–background-color); color: var(–text-color); margin: 0; padding: 0; line-height: 1.6; } .container { max-width: 1000px; margin: 20px auto; padding: 20px; background-color: var(–card-background); border-radius: 8px; box-shadow: 0 2px 10px var(–shadow-color); } h1, h2, h3 { color: var(–primary-color); text-align: center; margin-bottom: 20px; } h1 { font-size: 2.2em; } h2 { font-size: 1.8em; margin-top: 30px; border-bottom: 2px solid var(–primary-color); padding-bottom: 10px; } h3 { font-size: 1.4em; margin-top: 20px; } .loan-calc-container { background-color: var(–card-background); padding: 30px; border-radius: 8px; box-shadow: 0 2px 8px var(–shadow-color); margin-bottom: 30px; } .input-group { margin-bottom: 20px; text-align: left; } .input-group label { display: block; margin-bottom: 8px; font-weight: bold; color: var(–primary-color); } .input-group input[type="number"], .input-group input[type="text"], .input-group select { width: calc(100% – 22px); /* Adjust for padding and border */ padding: 10px; border: 1px solid var(–input-border-color); border-radius: 4px; font-size: 1em; box-sizing: border-box; } .input-group input[type="number"]:focus, .input-group input[type="text"]:focus, .input-group select:focus { outline: none; border-color: var(–primary-color); box-shadow: 0 0 0 2px rgba(0, 74, 153, 0.2); } .input-group .helper-text { font-size: 0.85em; color: #6c757d; margin-top: 5px; display: block; } .error-message { color: var(–error-color); font-size: 0.9em; margin-top: 5px; display: none; /* Hidden by default */ min-height: 1.2em; /* Prevent layout shifts */ } .button-group { display: flex; justify-content: space-between; margin-top: 25px; flex-wrap: wrap; gap: 10px; } .button-group button { padding: 12px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 1em; font-weight: bold; transition: background-color 0.3s ease, transform 0.2s ease; flex: 1; /* Distribute space */ min-width: 150px; } .btn-calculate { background-color: var(–primary-color); color: white; } .btn-calculate:hover { background-color: #003366; transform: translateY(-2px); } .btn-reset { background-color: #6c757d; color: white; } .btn-reset:hover { background-color: #5a6268; transform: translateY(-2px); } .btn-copy { background-color: #17a2b8; color: white; } .btn-copy:hover { background-color: #117a8b; transform: translateY(-2px); } #results-container { margin-top: 30px; padding: 25px; border: 1px solid var(–border-color); border-radius: 8px; background-color: #eef7ff; /* Light blue tint for results */ } #results-container h3 { margin-top: 0; color: var(–primary-color); text-align: left; } .result-item { display: flex; justify-content: space-between; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(–border-color); } .result-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .result-label { font-weight: bold; } .result-value { font-weight: bold; color: var(–primary-color); font-size: 1.1em; } .primary-result { font-size: 1.8em; color: var(–primary-color); text-align: center; margin: 15px 0; padding: 15px; background-color: #fff; border-radius: 5px; border: 2px solid var(–primary-color); } .formula-explanation { font-size: 0.95em; color: #555; margin-top: 15px; background-color: #fff; padding: 15px; border-radius: 5px; border-left: 4px solid var(–primary-color); } .table-scroll-wrapper { overflow-x: auto; margin-top: 20px; } table { width: 100%; border-collapse: collapse; margin-top: 15px; } th, td { padding: 12px 15px; text-align: right; border: 1px solid var(–border-color); } thead th { background-color: #f0f0f0; color: var(–text-color); font-weight: bold; text-align: center; } tbody td { background-color: var(–card-background); } tbody tr:nth-child(even) td { background-color: #f9f9f9; } caption { caption-side: bottom; font-style: italic; color: #777; margin-top: 8px; font-size: 0.9em; text-align: center; } #chart-container { margin-top: 30px; padding: 20px; background-color: var(–card-background); border-radius: 8px; box-shadow: 0 2px 8px var(–shadow-color); text-align: center; } #amortizationChart { max-width: 100%; height: auto; display: inline-block; /* Center the canvas */ } .article-content { margin-top: 40px; padding: 30px; background-color: var(–card-background); border-radius: 8px; box-shadow: 0 2px 8px var(–shadow-color); } .article-content p, .article-content ul, .article-content ol { margin-bottom: 15px; } .article-content ul { list-style: disc; margin-left: 20px; } .article-content ol { list-style: decimal; margin-left: 20px; } .article-content a { color: var(–primary-color); text-decoration: none; } .article-content a:hover { text-decoration: underline; } .faq-item { margin-bottom: 15px; padding: 15px; background-color: #f0f8ff; /* Light azure for FAQ */ border-left: 4px solid var(–primary-color); border-radius: 4px; } .faq-item h3 { margin-top: 0; text-align: left; cursor: pointer; position: relative; padding-left: 25px; } .faq-item h3::before { content: '+'; position: absolute; left: 5px; font-size: 1.2em; color: var(–primary-color); } .faq-item.open h3::before { content: '-'; } .faq-item .answer { display: none; margin-top: 10px; padding-left: 10px; color: #555; } .related-tools ul { list-style: none; padding: 0; } .related-tools li { margin-bottom: 10px; } .related-tools a { font-weight: bold; } @media (max-width: 768px) { .container { margin: 10px; padding: 15px; } h1 { font-size: 1.8em; } h2 { font-size: 1.5em; } .loan-calc-container, .article-content { padding: 20px; } .button-group button { width: 100%; /* Full width on small screens */ min-width: unset; } .primary-result { font-size: 1.5em; } th, td { padding: 10px; } }

Calculadora de Hipotecas: Estima tu Cuota Mensual

Una herramienta esencial para planificar la compra de tu hogar.

Ingresa la cantidad total que necesitas pedir prestado.
La tasa de interés anual que ofrece el banco (ej: 3.5% es 3.5).
El número total de años para pagar la hipoteca.

Resultados de la Hipoteca

Cuota Mensual Estimada:
Pago Total de Intereses:
Costo Total de la Hipoteca:
Pago Inicial (Estimado):
Explicación de la Fórmula: La cuota mensual se calcula usando la fórmula de amortización de préstamos estándar: M = P [ i(1 + i)^n ] / [ (1 + i)^n – 1], donde M es la cuota mensual, P es el monto principal del préstamo, i es la tasa de interés mensual (tasa anual / 12), y n es el número total de pagos (plazo en años * 12).

Tabla de Amortización (Primeros 12 Meses)

Mes Pago Interés Pagado Capital Pagado Saldo Restante
Detalle de los primeros 12 pagos mensuales.

Distribución de Pagos (Primeros Años)

Gráfico que muestra la proporción de interés y capital en tus pagos iniciales.

Entendiendo la Calculadora de Hipotecas y tu Préstamo

La compra de una vivienda es una de las decisiones financieras más importantes en la vida de una persona. Una hipoteca o préstamo hipotecario es el instrumento financiero que permite a la mayoría de las personas adquirir una propiedad. Nuestra **calculadora de hipotecas** está diseñada para ayudarte a comprender mejor los costos asociados y a planificar tus finanzas de manera efectiva.

¿Qué es una Calculadora de Hipotecas?

Una **calculadora de hipotecas** es una herramienta en línea que estima el pago mensual de un préstamo hipotecario basándose en varios factores clave: el monto total del préstamo, la tasa de interés anual y el plazo del préstamo en años. Al ingresar estos datos, la calculadora utiliza fórmulas financieras para proyectar tu cuota mensual, el total de intereses que pagarás a lo largo de la vida del préstamo y el costo total de la propiedad al finalizar los pagos. Es fundamental para comparar diferentes ofertas hipotecarias y entender la viabilidad financiera de comprar una casa.

Fórmula y Explicación Matemática de la Hipoteca

La base de cualquier **calculadora de hipotecas** es la fórmula de la anualidad, que calcula el pago periódico (generalmente mensual) de un préstamo con interés constante. La fórmula principal es:

M = P [ i(1 + i)^n ] / [ (1 + i)^n – 1]

Donde:

  • M: Es la cuota mensual del préstamo.
  • P: Es el monto principal del préstamo (el dinero que pides prestado).
  • i: Es la tasa de interés mensual. Se obtiene dividiendo la tasa de interés anual entre 12 (por ejemplo, si la tasa anual es 3.6%, la tasa mensual 'i' sería 0.036 / 12 = 0.003).
  • n: Es el número total de pagos. Se calcula multiplicando el plazo del préstamo en años por 12 (por ejemplo, un préstamo de 30 años tiene 30 * 12 = 360 pagos).

Esta fórmula asegura que cada pago cubra tanto una porción del capital adeudado como los intereses acumulados, y que al final del plazo, el préstamo quede completamente saldado. Entender esta matemática subyacente te permite apreciar cómo pequeños cambios en la tasa de interés o en el plazo pueden impactar significativamente tus pagos totales y la duración de tu compromiso financiero.

Ejemplos Prácticos de Uso de la Calculadora de Hipotecas

Imaginemos dos escenarios para ilustrar el uso de nuestra **calculadora de hipotecas**:

  1. Escenario 1: Compra de primera vivienda
    Una pareja joven busca comprar su primera casa. Piden un préstamo hipotecario de 150,000 EUR a una tasa de interés anual del 3.25% durante 30 años. Al ingresar estos datos en la calculadora:
    – Monto del Préstamo: 150,000 EUR
    – Tasa de Interés Anual: 3.25%
    – Plazo del Préstamo: 30 años
    La calculadora estimaría una cuota mensual de aproximadamente 651.98 EUR, un pago total de intereses de 84,712.80 EUR y un costo total de la hipoteca de 234,712.80 EUR.
  2. Escenario 2: Préstamo a menor plazo
    Supongamos que la misma pareja decide acortar el plazo para pagar la casa más rápido y reducir el interés total. Manteniendo el mismo monto y tasa de interés, pero eligiendo un plazo de 20 años:
    – Monto del Préstamo: 150,000 EUR
    – Tasa de Interés Anual: 3.25%
    – Plazo del Préstamo: 20 años
    La cuota mensual aumentaría a unos 817.52 EUR. Sin embargo, el pago total de intereses se reduciría drásticamente a 46,204.80 EUR, y el costo total de la hipoteca sería de 196,204.80 EUR.

Estos ejemplos demuestran cómo la **calculadora de hipotecas** ayuda a visualizar el impacto de diferentes plazos en los costos financieros a largo plazo. Puedes explorar diversas opciones de financiación para encontrar la que mejor se adapte a tu presupuesto.

Cómo Usar Esta Calculadora de Hipotecas

Nuestra **calculadora de hipotecas** es intuitiva y fácil de usar. Sigue estos pasos:

  1. Ingresa el Monto del Préstamo: Escribe la cantidad total de dinero que planeas pedir prestado al banco en euros.
  2. Introduce la Tasa de Interés Anual: Proporciona la tasa de interés anual que te ha ofrecido la entidad financiera. Asegúrate de usar el formato porcentual correcto (ej: 3.5 para 3.5%).
  3. Especifica el Plazo del Préstamo: Indica en cuántos años deseas pagar la totalidad de la hipoteca.
  4. Haz Clic en "Calcular Hipoteca": La calculadora procesará tus datos y mostrará la cuota mensual estimada, el total de intereses a pagar, el costo total de la hipoteca y el pago inicial aproximado.
  5. Explora la Tabla y el Gráfico: Observa la tabla de amortización para ver cómo se desglosan tus pagos mes a mes (interés vs. capital) y el gráfico para una visualización de la distribución de pagos.
  6. Usa los Botones: El botón "Restablecer Valores" te permite empezar de nuevo fácilmente. El botón "Copiar Resultados" guarda las cifras clave para que las uses donde necesites.

Experimenta con diferentes valores para entender cómo afectan tus pagos. Por ejemplo, prueba a ver cómo cambiaría tu cuota si pudieras aportar un mayor pago inicial.

Factores Clave que Afectan los Resultados de la Hipoteca

Varios elementos influyen directamente en la cuota mensual y el costo total de tu hipoteca:

  • Monto del Préstamo (P): Cuanto mayor sea la cantidad solicitada, mayores serán la cuota mensual y los intereses totales.
  • Tasa de Interés Anual (i): Este es uno de los factores más críticos. Una pequeña variación en la tasa de interés puede significar miles de euros de diferencia en el costo total a lo largo de los años. Las tasas más bajas resultan en cuotas menores y menos intereses pagados.
  • Plazo del Préstamo (n): Un plazo más largo (ej: 30 años) resulta en cuotas mensuales más bajas, pero pagarás significativamente más intereses totales a lo largo del tiempo. Un plazo más corto (ej: 15 o 20 años) implica cuotas mensuales más altas, pero menos intereses pagados y una liberación de deuda más rápida.
  • Pago Inicial: Aunque no se incluye directamente en la fórmula de la cuota mensual básica, un pago inicial mayor reduce el monto principal (P) del préstamo, lo que disminuye tanto la cuota mensual como el interés total pagado.
  • Costos Adicionales: Ten en cuenta que la cuota calculada usualmente no incluye otros gastos como seguros (de vida, de hogar), impuestos (como el IBI), o gastos de comunidad, que también deben ser considerados en tu presupuesto.

Comprender estos factores te da poder al negociar tu préstamo hipotecario.

Preguntas Frecuentes (FAQ) sobre Hipotecas

¿Es lo mismo la cuota mensual que el pago total de intereses?

No. La cuota mensual es el pago que realizas cada mes para cubrir tanto el capital prestado como los intereses generados durante ese periodo. El pago total de intereses es la suma de todos los intereses que pagarás a lo largo de toda la vida del préstamo, una vez que hayas liquidado el capital principal.

¿Cómo afecta la tasa de interés la cuota mensual?

La tasa de interés tiene un impacto directo y significativo. A mayor tasa de interés, mayor será la porción de tu cuota mensual destinada a intereses, y mayor será el costo total del préstamo. Reducir la tasa de interés, incluso en una fracción de punto porcentual, puede ahorrarte miles de euros.

¿Qué es el cuadro de amortización y por qué es importante?

El cuadro de amortización detalla cada pago que realizarás durante la vida de tu hipoteca. Muestra cuánto de cada pago se destina a intereses y cuánto al capital, así como el saldo restante después de cada pago. Es crucial para entender cómo evoluciona tu deuda y para planificar pagos adicionales o anticipados. Nuestra tabla de amortización te da una vista detallada.

¿Puedo usar la calculadora para diferentes monedas?

Esta calculadora está configurada para mostrar los montos en Euros (EUR) como se indica en las etiquetas de los campos de entrada. Para otras monedas, deberías ajustar las etiquetas y considerar las tasas de cambio y las condiciones específicas del mercado local.

¿Qué pasa si hago pagos adicionales a mi hipoteca?

Los pagos adicionales, especialmente si se destinan directamente a reducir el capital, pueden acortar significativamente el plazo de tu hipoteca y disminuir considerablemente la cantidad total de intereses que pagarás. Nuestra calculadora te da una base, pero la estrategia de pagos adicionales puede optimizar tu plan financiero. ¡Considera nuestras herramientas de planificación financiera!

Herramientas Relacionadas y Recursos Internos

© 2023 Tu Empresa Financiera. Todos los derechos reservados.

var chartInstance = null; // Variable global para mantener la instancia del gráfico function calculateMortgage() { // Obtener valores de los campos de entrada var loanAmountInput = document.getElementById("loanAmount"); var annualInterestRateInput = document.getElementById("annualInterestRate"); var loanTermYearsInput = document.getElementById("loanTermYears"); // Limpiar mensajes de error anteriores clearErrorMessages(); // Validar entradas var errors = validateInputs(loanAmountInput, annualInterestRateInput, loanTermYearsInput); if (Object.keys(errors).length > 0) { displayErrors(errors); return; // Detener el cálculo si hay errores } var principal = parseFloat(loanAmountInput.value); var annualInterestRate = parseFloat(annualInterestRateInput.value); var loanTermYears = parseFloat(loanTermYearsInput.value); // Cálculos var monthlyInterestRate = annualInterestRate / 100 / 12; var numberOfPayments = loanTermYears * 12; var monthlyPayment = 0; if (monthlyInterestRate > 0) { monthlyPayment = principal * (monthlyInterestRate * Math.pow(1 + monthlyInterestRate, numberOfPayments)) / (Math.pow(1 + monthlyInterestRate, numberOfPayments) – 1); } else { monthlyPayment = principal / numberOfPayments; // Si la tasa es 0, es una simple división } var totalInterestPaid = (monthlyPayment * numberOfPayments) – principal; var totalCost = principal + totalInterestPaid; var initialPayment = principal; // En este modelo, el monto principal es lo que se pide prestado. // Formatear resultados para visualización (con 2 decimales y separador de miles) var formattedMonthlyPayment = formatCurrency(monthlyPayment); var formattedTotalInterestPaid = formatCurrency(totalInterestPaid); var formattedTotalCost = formatCurrency(totalCost); var formattedInitialPayment = formatCurrency(initialPayment); // Mostrar resultados document.getElementById("monthlyPayment").textContent = formattedMonthlyPayment; document.getElementById("totalInterestPaid").textContent = formattedTotalInterestPaid; document.getElementById("totalCost").textContent = formattedTotalCost; document.getElementById("initialPayment").textContent = formattedInitialPayment; document.getElementById("primaryResult").textContent = "Cuota Mensual Estimada: " + formattedMonthlyPayment; // Actualizar tabla de amortización y gráfico updateAmortizationTable(principal, monthlyInterestRate, numberOfPayments, monthlyPayment); updateChart(principal, monthlyInterestRate, numberOfPayments, monthlyPayment); } function validateInputs(loanAmountInput, annualInterestRateInput, loanTermYearsInput) { var errors = {}; var principal = parseFloat(loanAmountInput.value); var annualInterestRate = parseFloat(annualInterestRateInput.value); var loanTermYears = parseFloat(loanTermYearsInput.value); if (isNaN(principal) || principal <= 0) { errors.loanAmount = "Por favor, ingresa un monto de préstamo válido y positivo."; } if (isNaN(annualInterestRate) || annualInterestRate < 0) { errors.annualInterestRate = "Por favor, ingresa una tasa de interés anual válida (0% o mayor)."; } if (isNaN(loanTermYears) || loanTermYears <= 0) { errors.loanTermYears = "Por favor, ingresa un plazo en años válido y positivo."; } return errors; } function displayErrors(errors) { if (errors.loanAmount) { document.getElementById("loanAmountError").textContent = errors.loanAmount; document.getElementById("loanAmountError").style.display = "block"; } if (errors.annualInterestRate) { document.getElementById("annualInterestRateError").textContent = errors.annualInterestRate; document.getElementById("annualInterestRateError").style.display = "block"; } if (errors.loanTermYears) { document.getElementById("loanTermYearsError").textContent = errors.loanTermYears; document.getElementById("loanTermYearsError").style.display = "block"; } } function clearErrorMessages() { document.getElementById("loanAmountError").textContent = ""; document.getElementById("loanAmountError").style.display = "none"; document.getElementById("annualInterestRateError").textContent = ""; document.getElementById("annualInterestRateError").style.display = "none"; document.getElementById("loanTermYearsError").textContent = ""; document.getElementById("loanTermYearsError").style.display = "none"; } function formatCurrency(amount) { if (isNaN(amount)) return "–"; return amount.toLocaleString('es-ES', { style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2 }); } function updateAmortizationTable(principal, monthlyInterestRate, numberOfPayments, monthlyPayment) { var tableBody = document.getElementById("amortizationTableBody"); tableBody.innerHTML = ""; // Limpiar tabla anterior var balance = principal; var numRows = Math.min(numberOfPayments, 12); // Mostrar solo los primeros 12 meses for (var i = 0; i < numRows; i++) { var interestPayment = balance * monthlyInterestRate; var principalPayment = monthlyPayment – interestPayment; balance -= principalPayment; // Asegurarse de que el balance no sea negativo debido a redondeos if (balance < 0) balance = 0; var row = tableBody.insertRow(); row.insertCell(0).textContent = (i + 1); row.insertCell(1).textContent = formatCurrency(monthlyPayment); row.insertCell(2).textContent = formatCurrency(interestPayment); row.insertCell(3).textContent = formatCurrency(principalPayment); row.insertCell(4).textContent = formatCurrency(balance); } } function updateChart(principal, monthlyInterestRate, numberOfPayments, monthlyPayment) { var ctx = document.getElementById("amortizationChart").getContext("2d"); // Destruir gráfico anterior si existe if (chartInstance) { chartInstance.destroy(); } var yearsToShow = Math.min(loanTermYears, 5); // Mostrar hasta 5 años o el plazo total si es menor var numberOfDataPoints = yearsToShow * 12; var labels = []; var interestData = []; var principalData = []; var currentBalance = principal; for (var i = 0; i 0) { monthLabel = "Año " + (i / 12); // Etiqueta anual } else if (i % 12 !== 0) { monthLabel = ""; // No mostrar etiqueta para meses intermedios en el eje X } labels.push(monthLabel); var interestPayment = currentBalance * monthlyInterestRate; var principalPayment = monthlyPayment – interestPayment; currentBalance -= principalPayment; if (currentBalance < 0) currentBalance = 0; interestData.push(interestPayment); principalData.push(principalPayment); } chartInstance = new Chart(ctx, { type: 'bar', // O 'line' si prefieres líneas data: { labels: labels, datasets: [{ label: 'Interés Pagado por Mes', data: interestData, backgroundColor: 'rgba(220, 53, 69, 0.6)', // Rojo suave para intereses borderColor: 'rgba(220, 53, 69, 1)', borderWidth: 1, fill: false }, { label: 'Capital Pagado por Mes', data: principalData, backgroundColor: 'rgba(40, 167, 69, 0.6)', // Verde suave para capital borderColor: 'rgba(40, 167, 69, 1)', borderWidth: 1, fill: false }] }, options: { responsive: true, maintainAspectRatio: false, scales: { x: { title: { display: true, text: 'Meses' } }, y: { title: { display: true, text: 'Monto (EUR)' }, beginAtZero: true } }, plugins: { legend: { position: 'top', }, title: { display: true, text: 'Desglose Mensual de Pagos (Intereses vs. Capital)' } } } }); } function resetForm() { document.getElementById("mortgageCalculatorForm").reset(); // Resetear resultados a valores por defecto document.getElementById("monthlyPayment").textContent = "–"; document.getElementById("totalInterestPaid").textContent = "–"; document.getElementById("totalCost").textContent = "–"; document.getElementById("initialPayment").textContent = "–"; document.getElementById("primaryResult").textContent = "–"; // Limpiar tabla y gráfico document.getElementById("amortizationTableBody").innerHTML = ""; if (chartInstance) { chartInstance.destroy(); chartInstance = null; } // Limpiar errores clearErrorMessages(); } function copyResults() { var monthlyPayment = document.getElementById("monthlyPayment").textContent; var totalInterestPaid = document.getElementById("totalInterestPaid").textContent; var totalCost = document.getElementById("totalCost").textContent; var initialPayment = document.getElementById("initialPayment").textContent; var loanAmount = document.getElementById("loanAmount").value; var annualInterestRate = document.getElementById("annualInterestRate").value; var loanTermYears = document.getElementById("loanTermYears").value; var assumptions = [ "Monto del Préstamo: " + (loanAmount ? formatCurrency(parseFloat(loanAmount)) : "–"), "Tasa de Interés Anual: " + (annualInterestRate ? annualInterestRate + "%" : "–"), "Plazo del Préstamo: " + (loanTermYears ? loanTermYears + " años" : "–") ]; var resultText = "Resultados de la Hipoteca:\n\n" + "Cuota Mensual Estimada: " + monthlyPayment + "\n" + "Pago Total de Intereses: " + totalInterestPaid + "\n" + "Costo Total de la Hipoteca: " + totalCost + "\n" + "Pago Inicial (Estimado): " + initialPayment + "\n\n" + "Supuestos Clave:\n" + assumptions.join("\n"); // Copiar al portapapeles navigator.clipboard.writeText(resultText).then(function() { // Opcional: mostrar una notificación al usuario alert("Resultados copiados al portapapeles."); }).catch(function(err) { console.error("Error al copiar resultados: ", err); // Opcional: mostrar un mensaje de error al usuario }); } function toggleFaq(element) { var faqItem = element.closest('.faq-item'); faqItem.classList.toggle('open'); var answer = faqItem.querySelector('.answer'); if (faqItem.classList.contains('open')) { answer.style.display = 'block'; } else { answer.style.display = 'none'; } } // Cargar gráfico y tabla iniciales con valores predeterminados o vacíos document.addEventListener('DOMContentLoaded', function() { // Establecer valores por defecto y calcular si hay valores prellenados var loanAmountDefault = 150000; var annualInterestRateDefault = 3.25; var loanTermYearsDefault = 30; var loanAmountInput = document.getElementById("loanAmount"); var annualInterestRateInput = document.getElementById("annualInterestRate"); var loanTermYearsInput = document.getElementById("loanTermYears"); // Solo establecer si están vacíos para permitir que el navegador recuerde valores if (loanAmountInput.value === "") loanAmountInput.value = loanAmountDefault; if (annualInterestRateInput.value === "") annualInterestRateInput.value = annualInterestRateDefault; if (loanTermYearsInput.value === "") loanTermYearsInput.value = loanTermYearsDefault; // Realizar el primer cálculo calculateMortgage(); // Añadir listener para redimensionamiento de ventana para el gráfico window.addEventListener('resize', function() { if (chartInstance) { updateChart( parseFloat(document.getElementById("loanAmount").value), parseFloat(document.getElementById("annualInterestRate").value) / 100 / 12, parseFloat(document.getElementById("loanTermYears").value) * 12, parseFloat(document.getElementById("monthlyPayment").textContent.replace(/[^0-9.-]+/g,"")) // Re-parse value from formatted string ); } }); }); // Placeholder for Chart.js – ensure it's loaded if using Chart.js // If not using Chart.js, remove this and implement native canvas drawing. // For this example, assuming Chart.js is available in the environment or will be added. // If not, a native canvas implementation would be needed here. // For production, you'd typically include Chart.js via CDN or local file. // Example CDN: // IMPORTANT: If not using Chart.js, this section needs to be replaced with native canvas code. // For now, let's assume Chart.js IS available.

Leave a Comment