如何在JavaScript中点击按钮时将变量设为常量值

我需要点击页面按钮时，执行脚本将id为wine-content的元素高度设置为常量wineLevelSG的值（即53%），但尝试多个版本后都无法实现，以下是问题分析和修复方案：

错误原因 #

1. 按钮事件属性拼写错误：按钮的点击事件属性写为onCick，正确的属性名应为onClick，少写了字母l导致点击无法触发目标函数。
2. 目标函数逻辑缺失：定义的SGtest函数仅声明了变量，没有执行修改元素高度和更新显示的核心逻辑，完全没实现需求功能。

修正后的代码 #

HTML部分 #

<center>
  <div class="container">
    <div id="wine-content">
    </div>
  </div>

  <div class="stem">
  </div>

  <div class="base">
  </div>

  <br />
  
  <input type="input" min="0" max="100" value="1" id="wine-level-control">
  
  <div id="text">Wine</div>
  <div id="output">1%</div>
</center>

<button onClick="SGtest()">SGtest</button>

JavaScript部分 #

function SGtest() {
  // 使用常量wineLevelSG设置高度，拼接百分比单位
  const calculatedwineHeight = `${wineLevelSG}%`;
  wineContent.style.height = calculatedwineHeight;
  output.innerHTML = calculatedwineHeight;
}

var wineLevelRemote = document.getElementById("wine-level-control");
var wineContent = document.getElementById("wine-content");
var output = document.getElementById("output");
const wineLevelSG = 53;


wineLevelRemote.addEventListener("change", function(e) {
  var wineheight = parseInt(wineLevelRemote.value);
  var calculatedwineHeight = wineheight + "%";

  if (!wineheight || wineheight <= 1) {
    calculatedwineHeight = "0%";
  } else if (wineheight >= 99) {
    calculatedwineHeight = "99%";
  }

  wineContent.style.height = calculatedwineHeight;
  output.innerHTML = calculatedwineHeight;
});

内容的提问来源于stack exchange，提问作者Box