I’m trying to make a calculator and I have completed the html and css files so far however, whenever I click on a number button it is not displaying in the display. I am not sure where I went wrong, it most likely is a easy fix that I am just not seeing.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cute Calculator</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="calculator">
<input id="display" readonly>
<div id="keys">
<button onclick="appendToDisplay('+')" class="op-button">+</button>
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button onclick="appendToDisplay('-')" class="op-button">-</button>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('*')" class="op-button">*</button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="appendToDisplay('/')" class="op-button">/</button>
<button onclick="appendToDisplay('0')">0</button>
<button onclick="appendToDisplay('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="clearDisplay()" class="op-button">C</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
body{
margin:0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: url("./calckitty.jpg");
background-size: cover;
}
#calculator{
font-family: Arial, Helvetica, sans-serif;
background: url("./kitty2.jpg");
border-radius: 15px;
max-width:500px;
overflow:hidden;
}
#display{
width:100%;
padding:20px;
font-size: 5rem;
text-align: left;
border:none;
background: url("./kittytop.jpg");
opacity: 90%;
color:white;
}
#keys{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
padding: 20px;
}
button{
width:100px;
height:100px;
border-radius: 50px;
border: 1.5px solid pink;
background-color: hsl(26, 93%, 89%);
color: rgb(128, 118, 118);
font-size: 2rem;
font-weight: bold;
cursor: pointer;
}
button:hover{
background-color: hsl(332, 60%, 77%);
}
button:active{
background-color: hsl(332, 60%, 83%);
}
.op-button{
background-color: hsl(327, 44%, 35%);
}
.op-button:hover{
background-color: hsl(327, 59%, 45%);
}
.op-button:active{
background-color: hsl(57, 54%, 58%);
}
const display = document.getElementById("display");
function appendToDisplay(input){
display.value += input;
console.log;
}
function clearDisplay(){
}
function calculate(){
}
I went through my html file, made sure the .js and .html file were linked, they were and then I went back to make sure my ids were correct and they are.