HTML -код с JS хорошо работает в онлайн -просмотре HTML, но не работает в блогере. Почему это так? [закрыто] ⇐ Javascript

[Anonymous]

Я сгенерировал HTML -код для калькулятора EMI с использованием AI. Затем я проверил код в онлайн -просмотре HTML и работает хорошо. Но когда я вставил его в посте Blogger, диаграммы не отображаются, ползунки не меняют входы, вывод не обновляется, когда числа изменяются вручную (поскольку ползунки не работают). В чем проблема с блоггером, потому что есть внешний JS или что -то еще? Вот весь код. Пожалуйста, кто -нибудь помогает с решением. < /P>




Flat vs Reducing Rate Calculator


body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f6f9;
min-height: 100vh; /* Ensure body takes full viewport height */
display: flex;
flex-direction: column;
}

.container {
max-width: 900px;
margin: 0 auto;
background: white;
border-radius: 10px;
padding: 20px; /* Reduced padding for compactness */
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
flex: 1; /* Allow container to grow and fill available space */
}

h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 20px; /* Reduced margin */
font-size: 24px; /* Slightly smaller heading */
}

.input-section {
display: grid;
gap: 15px; /* Reduced gap */
margin-bottom: 15px; /* Reduced margin */
}

.input-group {
display: flex;
flex-direction: column;
gap: 5px; /* Reduced gap */
}

label {
color: #34495e;
font-weight: 500;
font-size: 14px; /* Smaller label text */
}

.slider-container {
display: flex;
align-items: center;
gap: 10px; /* Reduced gap */
}

input[type="range"] {
flex: 1;
-webkit-appearance: none;
height: 6px; /* Thinner slider */
background: #ddd;
border-radius: 5px;
outline: none;
}

input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px; /* Smaller thumb */
height: 16px;
background: #3498db;
border-radius: 50%;
cursor: pointer;
}

input[type="number"] {
width: 80px; /* Reduced width */
padding: 6px; /* Reduced padding */
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px; /* Smaller text */
}

.results {
display: grid;
grid-template-columns: 1fr;
gap: 15px; /* Reduced gap */
margin-top: 15px; /* Reduced margin */
}

.result-box {
padding: 15px; /* Reduced padding */
border-radius: 5px;
background-color: #f8f9fa;
border: 2px solid;
overflow: hidden;
}

.flat-rate {
border-color: #e74c3c;
}

.reducing-rate {
border-color: #2ecc71;
}

.chart-container {
position: relative;
width: 100%;
max-width: 200px; /* Reduced max-width */
height: 200px; /* Reduced height */
margin: 0 auto 10px; /* Reduced margin */
}

.details {
text-align: center;
}

.details p {
margin: 5px 0; /* Reduced margin */
color: #34495e;
font-size: 14px; /* Smaller text */
}

.details p span {
font-weight: bold;
color: #2c3e50;
}

.legend {
display: flex;
justify-content: center;
gap: 10px; /* Reduced gap */
margin-top: 5px; /* Reduced margin */
flex-wrap: wrap;
}

.legend-item {
display: flex;
align-items: center;
gap: 5px;
}

.legend-dot {
width: 10px; /* Smaller dot */
height: 10px;
border-radius: 50%;
}

.legend-dot.loan {
background-color: #d6e4ff;
}

.legend-dot.interest {
background-color: #3366cc;
}

@media (min-width: 600px) {
.results {
grid-template-columns: 1fr 1fr;
}

.chart-container {
max-width: 250px; /* Slightly larger on desktop */
height: 250px;
}

.input-section {
gap: 20px;
}

.details p {
font-size: 16px;
}

h1 {
font-size: 28px;
}
}

@media (max-width: 599px) {
.chart-container {
max-width: 150px; /* Even smaller on mobile */
height: 150px;
}

.details p {
font-size: 12px; /* Smaller text on mobile */
}

.legend {
gap: 8px;
}

.input[type="number"] {
width: 70px;
}
}




Flat vs Reducing Rate Calculator


Loan Amount (₹)






Interest Rate (%)






Loan Tenure (Years)








Flat Rate



EMI Amount: ₹0
Amount To Be Paid: ₹0



Loan Amount: ₹0


Interest Amount: ₹0




Reducing Rate



EMI Amount: ₹0
Amount To Be Paid: ₹0



Loan Amount: ₹0


Interest Amount: ₹0








// Get all input elements
const principalRange = document.getElementById('principalRange');
const principalInput = document.getElementById('principal');
const rateRange = document.getElementById('rateRange');
const rateInput = document.getElementById('rate');
const tenureRange = document.getElementById('tenureRange');
const tenureInput = document.getElementById('tenure');

// Initialize charts
const flatChartCtx = document.getElementById('flatChart').getContext('2d');
const reducingChartCtx = document.getElementById('reducingChart').getContext('2d');

const flatChart = new Chart(flatChartCtx, {
type: 'doughnut',
data: {
labels: ['Loan Amount', 'Interest Amount'],
datasets: [{
data: [100000, 0],
backgroundColor: ['#d6e4ff', '#3366cc'],
borderWidth: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
cutout: '70%',
plugins: {
legend: { display: false },
tooltip: {
enabled: true,
callbacks: {
label: function(context) {
let label = context.label || '';
if (label) {
label += ': ₹';
}
label += context.raw.toLocaleString('en-IN');
return label;
}
}
}
}
}
});

const reducingChart = new Chart(reducingChartCtx, {
type: 'doughnut',
data: {
labels: ['Loan Amount', 'Interest Amount'],
datasets: [{
data: [100000, 0],
backgroundColor: ['#d6e4ff', '#3366cc'],
borderWidth: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
cutout: '70%',
plugins: {
legend: { display: false },
tooltip: {
enabled: true,
callbacks: {
label: function(context) {
let label = context.label || '';
if (label) {
label += ': ₹';
}
label += context.raw.toLocaleString('en-IN');
return label;
}
}
}
}
}
});

// Sync slider and number input
function syncInputs(range, input) {
range.addEventListener('input', () => {
input.value = range.value;
calculateEMI();
});
input.addEventListener('input', () => {
if (input.value >= range.min && input.value

Подробнее здесь: https://stackoverflow.com/questions/795 ... k-in-blogg