JS函数问题，我已经尝试解决这个问题一个小时了，即使这是一个简单的问题，我也想显示 #input1 的十六进制值

Question

我想获取值coal，然后在另一个函数中显示它，但不知道如何执行。我知道这段代码可能不是最有效的，但我只编写了几周的代码，所以任何提示都很好。谢谢，我知道变量的名称很糟糕，但我计划很快改进它。

let valueCol = "";
const i2n = document.getElementById("input1");
i2n.onchange = function valGet() {
valueCol = i2n.value;
colorBase.style.background = valueCol;
document.getElementById("head").innerHTML = valueCol;
}

* {
box-sizing: border-box;
margin: 0;
}
#color-base {
height: 40vh;
width: 40vw;
}
.container {
display: grid;
background-color: blue;
gap: 10px;
height: 100vh;
}
.sweetContainer {
grid-area: sweet;
background-color: green;
height: 90vh;
}
.stats {
grid-area: stat;
background-color: red;
height: 90vh;
}
.header {
grid-area: head;
background-color: yellow;
height: 10vh;
}
.colSel {
height: 5vh;
width: 8vw;
}
.container {
grid-template-areas: 'head head head' 'stat sweet sweet' 'stat sweet sweet';
}

<div class="container">
<div class="sweetContainer">
<input type="color" name="" class="colSel" id="input1" value="Enter name">
<div id="color-base" class="sweet">
<div id="flavor" class="added"></div>
</div>
</div>
<div class="stats">
<h1 id="objectDisplay">stats for the object</h1>
</div>
<div class="header">
<h1 id="head">Name of company</h1>
</div>
</div>

Answer 1

您似乎错过了这一行

const colorBase = document.getElementById("color-base");

在指定背景样式之前。

检查此处的相同示例并进行更正https://codepen.io/shreyasikhar/pen/QWmVdJb