Issue
Happy New Year! So, I was making a calculator with HTML, CSS and JS. I wanted that the content in the input to not disappear even after refreshing the page. I couldn't figure it out and wanted some help. I have not added a lot of logic into the calculator so please ignore that.
Below is the code:
var text = document.getElementById("field");
function type(word) {
text.value += word;
}* {
margin: 0;
padding: 0;
color: white;
}
body {
background-color: black;
display: flex;
justify-content: center;
transform: translateY(50%);
}
input {
background-color: transparent;
border: 1px solid white;
width: 250px;
height: 70px;
margin-bottom: 20px;
font-size: xx-large;
text-align: right;
}
td {
width: 60px;
height: 60px;
text-align: center;
border-radius: 50%;
border: 1px solid white;
cursor: pointer;
font-weight: bold;
font-size: larger;
}
td:hover {
color: black;
background-color: white;
}<html>
<head>
<title>Calculator</title>
</head>
<body>
<main>
<input type="text" id="field" maxlength="11">
<table>
<tr>
<td onclick="type('%')">%</td>
<td onclick="text.value=''">C</td>
<td onclick="type(')')">)</td>
<td onclick="type('÷')">÷</td>
</tr>
<tr>
<td onclick="type('7')">7</td>
<td onclick="type('8')">8</td>
<td onclick="type('9')">9</td>
<td onclick="type('×')">×</td>
</tr>
<tr>
<td onclick="type('4')">4</td>
<td onclick="type('5')">5</td>
<td onclick="type('6')">6</td>
<td onclick="type('-')">-</td>
</tr>
<tr>
<td onclick="type('1')">1</td>
<td onclick="type('2')">2</td>
<td onclick="type('3')">3</td>
<td onclick="type('+')">+</td>
</tr>
<tr>
<td onclick="type('(-')">+/-</td>
<td onclick="type('0')">0</td>
<td onclick="type('.')">.</td>
<td>=</td>
</tr>
</table>
</main>
</body>
</html>Solution
The input will always be cleared when you refresh the page. A simple way to retain the input value would be to use the localStorage API.
This post may be helpful.
Answered By - sgck
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.