When I input a value for typeColor, I expect the background color of the box to change. Similarly, when I input a value for typeName, I want the text on the box to update. However, neither of these actions are working as intended. The color doesn't change and the name disappears altogether. I've experimented with different solutions but haven't found one that works.
box = document.getElementById("box");
typeColor = document.getElementById("typeColor").value;
typeName = document.getElementById("typeName").value;
boxName = document.getElementById("boxName");
function changeBoxColor() {
box.style.backgroundColor = typeColor;
}
function changeBoxName() {
boxName.innerText = typeName;
}body {
margin: 0px;
}
#box {
width: 100px;
height: 100px;
background-color: grey;
margin-left: 100px;
margin-top: 50px;
display: flex;
justify-content: center;
align-items: center;
}<head>
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<input id="typeColor" placeholder="Enter a color...">
<button onclick="changeBoxColor()">Change Box Color</button>
<input id="typeName" placeholder="Enter a name...">
<button onclick="changeBoxName()">Change Box Name</button>
<div id="box">
<center>
<p id="boxName">Box</p>
</center>
</div>
<script src="script.js"></script>
</body>