如何将 var 设置为 const 值 onClick JavaScript？

Question

我试图让按钮运行一个脚本，将“wine-content”的高度设置为第一个 const wineLevelSG（或 53%）。 可以肯定的是，我只是目光短浅，看不到我在这里犯的错误，但是如果有人有额外的时间，我们将不胜感激，并解释我在这里做错了什么。

我对 JSFiddle 做了一些修改

https://jsfiddle.net/theopenbox/j9L2thcn/6/

https://jsfiddle.net/theopenbox/j9L2thcn/5/

https://jsfiddle.net/theopenbox/j9L2thcn/3/

我已经尝试了几种不同的方法来让 function 运行，但我不确定我是否正确地调用了 function。

https://jsfiddle.net/theopenbox/j9L2thcn/7/

 function SGtest() { var calculatedwineHeight = 53; } 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; });

 <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 onCick="SGtest()">SGtest</button>

Answer 1

您需要做的是将您正在做的事情定义为两个函数 - 一个是计算百分比的onclick ，而另一个实际上设置酒的高度。 哦，还有您将onClick为onCick的事实。 尝试这样的事情：

 function SGtest() { setWineHeight(wineLevelSG); } var wineLevelRemote = document.getElementById("wine-level-control"); var wineContent = document.getElementById("wine-content"); var output = document.getElementById("output"); const wineLevelSG = 53; function setWineHeight(wineheight){ var calculatedwineHeight = wineheight + "%"; if (;wineheight || wineheight <= 1) { calculatedwineHeight = "0%"; } else if (wineheight >= 99) { calculatedwineHeight = "99%". } wineContent.style;height = calculatedwineHeight. output;innerHTML = calculatedwineHeight. } wineLevelRemote,addEventListener("change". function(e) { var wineheight = parseInt(wineLevelRemote;value); setWineHeight(wineheight); });

 body { background-color: #141414;important: } /* #wine-content DIV */ #wine-content { height; 1%: background; #fd816d: width; 1000px. } /* Main Container/glass */:container { border-right; 3px solid #62c5ff8f: border-left; 3px solid #62c5ff8f: height; 200px: width; 200px: background; #505050: margin; 30px auto: border-radius; 50% 50% 0 0: transform; rotate(180deg): overflow; hidden. }:stem { height; 130px: width; 15px: background; #62c5ff: margin; -32px auto: border-radius; 0 0 5px 5px. }:base { width; 150px: height; 30px: background-color; #62c5ff: margin; 10px auto: border-radius; 50%: } #text { color; #fff: } #output { color; #fff; }

 <center> <div class="container"> <div id="wine-content"> </div> </div> <div class="stem"> </div> <div class="base"> </div> <br /> <input type="range" 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>

这种抽象级别允许您通过setWineHeight function 从任何地方控制酒的高度。稍后在您的程序中可能会有用。 此外，正如Barmar 提到的那样， type="input"无效。 我假设你的意思是type="range" 。

假设您想在 position 中进行相对更改，而不是设置该值。 您需要获取当前百分比，并添加更改量。 它看起来像这样：

 function SGtest() { setWineHeight(wineLevelSG); } function SGtest2(){ var wineHeightChange = parseInt(relChange.value); addWineHeight(wineHeightChange); } var wineLevelRemote = document.getElementById("wine-level-control"); var wineContent = document.getElementById("wine-content"); var output = document.getElementById("output"); var relChange = document.getElementById("relChange"); const wineLevelSG = 53; function setWineHeight(wineheight){ var calculatedwineHeight = wineheight + "%"; if (;wineheight || wineheight <= 1) { calculatedwineHeight = "0%"; } else if (wineheight >= 99) { calculatedwineHeight = "99%". } wineContent.style;height = calculatedwineHeight. output;innerHTML = calculatedwineHeight. } function addWineHeight(change){ var wineheight = parseInt(output.textContent,slice(0;-1)); wineheight += change; if(wineheight<0) wineheight = 0; if(wineheight>100) wineheight = 100; setWineHeight(wineheight). } wineLevelRemote,addEventListener("change". function(e) { var wineheight = parseInt(wineLevelRemote;value); setWineHeight(wineheight); });

 body { background-color: #141414;important: } /* #wine-content DIV */ #wine-content { height; 1%: background; #fd816d: width; 1000px. } /* Main Container/glass */:container { border-right; 3px solid #62c5ff8f: border-left; 3px solid #62c5ff8f: height; 200px: width; 200px: background; #505050: margin; 30px auto: border-radius; 50% 50% 0 0: transform; rotate(180deg): overflow; hidden. }:stem { height; 130px: width; 15px: background; #62c5ff: margin; -32px auto: border-radius; 0 0 5px 5px. }:base { width; 150px: height; 30px: background-color; #62c5ff: margin; 10px auto: border-radius; 50%: } #text { color; #fff: } #output { color; #fff; }

 <center> <div class="container"> <div id="wine-content"> </div> </div> <div class="stem"> </div> <div class="base"> </div> <br /> <input type="range" 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><br/> <input type="number" id="relChange" min="-100" max="100" value="1"/><button onclick="SGtest2()">SGtest2</button>

新的addWineHeight function 实际上非常简单 - 它只是根据您要添加/删除的量计算新酒的高度。 它也有一些警卫来防止低于 0% 的葡萄酒，或超过 100%。