Clash Royale CLAN TAG#URR8PPP

Alternative to overflow:hidden doesn't work (calculator display): Javascript

I've used a function called scaleFont() in order to make sure that my calculator display never shows more characters than it can hold. Of course I could have used overflow:hidden to achieve that goal, however, that caused the last character to be clipped mid-character, which I wanted to avoid. As such, I've used scaleFont(), to measure the width of the display, the width of the specific characters, and calculate how many characters can be displayed. This works fine whenever I enter a number or an operation sign (+-/*), but this does not work when I push the equation button. Instead, the display will show one character too many (in my case that is 17 characters instead of 16 characters). Does anyone know why that is?

let digitsArray = ;
let digitsString = "";
let displayOutput = "";
let pressedButtonsArray = ;
let pressedButtonsString = "";
let visibleArray = ;
let visibleText = "";
let result = "";
let displayTextWidth;
let numberOfCharacters;
let pixelsPerCharacter;
let numberOfVisibleCharacters;
let outerDivWidth;

window.onload = function()
outerDivWidth = document.getElementById("outerDiv").offsetWidth;
;

window.onresize = function()
outerDivWidth = document.getElementById("outerDiv").offsetWidth;
;


document.onkeypress = function(event) ;

function show()




function scaleFont()

// Put in here, so that it's executed everytime a button is pressed //
console.log("offsetwidth: " + document.getElementById("displayText").offsetWidth)
displayTextWidth = document.getElementById("displayText").offsetWidth;
console.log("displayTextWidth: " + displayTextWidth);
numberOfCharacters = visibleText.length;
console.log("numberOfCharacters: " + numberOfCharacters);
pixelsPerCharacter = displayTextWidth/numberOfCharacters;
console.log("pixelsPerCharacter: " + pixelsPerCharacter);
numberOfVisibleCharacters = Math.floor(outerDivWidth / pixelsPerCharacter);
console.log("numberOfVisibleCharacters: " + numberOfVisibleCharacters);
displayText = visibleText.slice(-numberOfVisibleCharacters)
document.getElementById("displayText").innerHTML = displayText;
console.log("offsetwidth: " + document.getElementById("displayText").offsetWidth)



function clickNumberButton(button)
//Equation has happened//
if (pressedButtonsArray[pressedButtonsArray.length-1] == "=")
pressedButtonsArray = ;
pressedButtonsArray.push(button);
pressedButtonsString = pressedButtonsArray.join("");

visibleArray = ;
visibleArray.push(button);
visibleText = visibleArray.join("");
document.getElementById("displayText").innerHTML = visibleText;

//Equation hasn't happened//
else
pressedButtonsArray.push(button);
pressedButtonsString = pressedButtonsArray.join("");

visibleArray.push(button);
visibleText = visibleArray.join("");
document.getElementById("displayText").innerHTML = visibleText;

scaleFont();
console.log("PBA: " + pressedButtonsArray);
console.log("VA: " + visibleArray);
console.log("PBS: " + pressedButtonsString);
console.log("VT: " + visibleText);


function clickOperationButton(button, symbol)

function equate()
if (pressedButtonsArray.length > 0 && (/[0123456789]/.test(pressedButtonsArray[pressedButtonsArray.length-1])))
pressedButtonsArray.push("=");
result = eval(pressedButtonsString);
pressedButtonsString = result.toString();

visibleArray.push("=");
visibleText = result.toString();
document.getElementById("displayText").innerHTML = visibleText;

scaleFont();
console.log("PBA: " + pressedButtonsArray);
console.log("VA: " + visibleArray);
console.log("PBS: " + pressedButtonsString);
console.log("VT: " + visibleText);


function del()
if (pressedButtonsArray[pressedButtonsArray.length-1] == "=")
pressedButtonsArray = ;
pressedButtonsString = "";

visibleArray = ;
visibleText = "";
result = "";
document.getElementById("displayText").innerHTML = "";

else
pressedButtonsArray.splice(-1,1);
pressedButtonsString = pressedButtonsArray.join("");

visibleArray.splice(-1,1)
visibleText = visibleArray.join("");
document.getElementById("displayText").innerHTML = visibleText;

scaleFont();
console.log("PBA: " + pressedButtonsArray);
console.log("VA: " + visibleArray);
console.log("PBS: " + pressedButtonsString);
console.log("VT: " + visibleText);


function cancel()
pressedButtonsArray = ;
pressedButtonsString = "";
visibleArray = ;
visibleText = "";
result = "";
scaleFont();
document.getElementById("displayText").innerHTML = "";
console.log("PBA: " + pressedButtonsArray);
console.log("VA: " + visibleArray);
console.log("PBS: " + pressedButtonsString);
console.log("VT: " + visibleText);


.container
width: 100%;
height: 100%;
margin: auto;


.wrapper
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 16vh;
font-family: sans-serif;


.outerDiv
font-size: 80px;
grid-column-start: 1;
grid-column-end: 13;
grid-row-start: 1;
grid-row-end: 2;
background-color: #DABE4A;
text-align:right;
white-space: nowrap;


.innerDiv
float:right;


.displayText


.cancel
grid-column-start: 1;
grid-column-end: 7;
grid-row-start: 2;
grid-row-end: 3;
display: flex;
justify-content: center;
align-items: center;


.del
grid-column-start: 7;
grid-column-end: 10;
grid-row-start: 2;
grid-row-end: 3;


.divide
grid-column-start: 10;
grid-column-end: 13;
grid-row-start: 2;
grid-row-end: 3;


.multiply
grid-column-start: 10;
grid-column-end: 13;
grid-row-start: 3;
grid-row-end: 4;


.minus
grid-column-start: 10;
grid-column-end: 13;
grid-row-start: 4;
grid-row-end: 5;


.plus
grid-column-start: 10;
grid-column-end: 13;
grid-row-start: 5;
grid-row-end: 7;


.seven
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;


.eight
grid-column-start: 4;
grid-column-end: 7;
grid-row-start: 3;
grid-row-end: 4;


.nine
grid-column-start: 7;
grid-column-end: 10;
grid-row-start: 3;
grid-row-end: 4;


.four
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 4;
grid-row-end: 5;


.five
grid-column-start: 4;
grid-column-end: 7;
grid-row-start: 4;
grid-row-end: 5;


.six
grid-column-start: 7;
grid-column-end: 10;
grid-row-start: 4;
grid-row-end: 5;


.one
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 5;
grid-row-end: 6;


.two
grid-column-start: 4;
grid-column-end: 7;
grid-row-start: 5;
grid-row-end: 6;


.three
grid-column-start: 7;
grid-column-end: 10;
grid-row-start: 5;
grid-row-end: 6;


.decimal
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 6;
grid-row-end: 7;


.zero
grid-column-start: 4;
grid-column-end: 7;
grid-row-start: 6;
grid-row-end: 7;


.equal
grid-column-start: 7;
grid-column-end: 10;
grid-row-start: 6;
grid-row-end: 7;


.button
display: flex;
align-items: center;
justify-content: center;
font-size: 35px;
border: thin black solid;


.special
background-color: #C6CE71;


.operation
background-color: #8CD4B9;


.number
background-color: #153058;


.module-button
background-color: inherit;
font: inherit;
border: none;
width: 100%;
height: 100%;


.module-button:focus outline:0;

.module-button:hover
filter:brightness(1.5);


.module-button:active
filter:brightness(1);


@media only screen and (min-width: 768px)
.container
width: 752px;
max-height: 100%;

.wrapper
grid-auto-rows: minmax(103px);



<div class="container">
<div class="wrapper">
<div class="outerDiv" id="outerDiv">
<div class="innerDiv" id="innerDiv">
<span class="displayText" id="displayText">
</span>
</div>
</div>
<div class="cancel button special"><button class="module-button" onclick="cancel()">CANCEL</button></div>
<div class="del button special"><button class="module-button" onclick="del()">DEL</button></div>

<div class="plus button operation"><button class="module-button" onclick="clickOperationButton('+','+')">+</button></div>
<div class="minus button operation"><button class="module-button" onclick="clickOperationButton('-','-')">-</button></div>
<div class="multiply button operation"><button class="module-button" onclick="clickOperationButton('*','×')">×</button></div>
<div class="divide button operation"><button class="module-button" onclick="clickOperationButton('/','÷')">÷</button></div>


<div class="seven button number"><button class="module-button" onclick="clickNumberButton(7)">7</button></div>
<div class="eight button number"><button class="module-button" onclick="clickNumberButton(8)">8</button></div>
<div class="nine button number"><button class="module-button" onclick="clickNumberButton(9)">9</button></div>

<div class="four button number"><button class="module-button" onclick="clickNumberButton(4)">4</button></div>
<div class="five button number"><button class="module-button" onclick="clickNumberButton(5)">5</button></div>
<div class="six button number"><button class="module-button" onclick="clickNumberButton(6)">6</button></div>

<div class="one button number"><button class="module-button" onclick="clickNumberButton(1)">1</button></div>
<div class="two button number"><button class="module-button" onclick="clickNumberButton(2)">2</button></div>
<div class="three button number"><button class="module-button" onclick="clickNumberButton(3)">3</button></div>

<div class="decimal button number"><button class="module-button" onclick="clickNumberButton('.')">.</button></div>
<div class="zero button number"><button class="module-button" onclick="clickNumberButton(0)">0</button></div>
<div class="equal button number"><button class="module-button" onclick="equate()">=</button></div>

</div>
</div>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.