Having some issues with a JavaScript code that involves innerHTML, causing a discrepancy in width compared to the CSS and Bootstrap rules I have set up.
Below is the JavaScript code snippet:
let numeroStreams = document.getElementById('num')
let resultado = document.getElementById('res')
// Some commented out lines of code here...
let dolar = {
Spotify: 0.00437,
Deezer: 0.0064,
Amazon: 0.00402,
Apple: 0.00783,
Ytmusic: 0.008,
Tidal: 0.01284,
Yt: 0.00087,
};
let divisaoReais = 5.37;
let real = {...}; // Code regarding 'real' variables are omitted for brevity
function calc() {
if (numeroStreams.value > 0) {
res.innerHTML = `<div class="row no-gutters">
... // Nested HTML structure output based on calculations
</div>`
} else {
window.alert('Estimated streams number cannot be blank.')
}
}
The expected result image can be seen https://i.sstatic.net/h90pk.jpg.
However, the actual output image looks like this: https://i.sstatic.net/4S3WM.jpg.
To see the functionality in action please visit:
Your assistance in resolving this issue would be greatly appreciated. Thank you!