Recently, I dipped my toes into the world of Javascript. However, I found myself puzzled by the script and its corresponding HTML output provided below.
Script:
<h1>JavaScript Variables</h1>
<p id="demo"></p>
<script>
var x = 3.14;
document.getElementById("demo").innerHTML = x + 1;
</script>
</body>
</html>
Output:
JavaScript Variables
4.140000000000001
I can't help but question why the result displays as 4.140000000000001 rather than a neater 4.14? Moreover, when experimenting with adding different values to x such as x + 2, x + 3, or x + 4, the output remains similarly inaccurate. Strangely enough, it only seems to work correctly when x is paired with numbers like 10. Any insight on this matter would be greatly appreciated.