How to set a var to a const value onClick JavaScript?

Question

I am trying to make the button I have there run a script that will set the height of the "wine-content" to the first const wineLevelSG (or 53%). Pretty sure I'm just getting tunnel vision and can't see the mistake I'm making here, but any help would be appreciated as well as an explanation of what I'm doing wrong here if anyone has the extra time.

I have a few revisions on JSFiddle

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

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

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

I've tried several different ways to get the function to run, but I'm not exactly certain I'm even calling the function correctly.

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>

Please revise to just show your _current_ effort in the snippet demo I've created above. Almost no one will review your various attempts individually. See [ask] and take the [tour] for tips. — isherwood, Nov 23 '22 at 16:59
What is `type="input"` supposed to mean? That's not a valid type, so it will be treated as `type="text"` — Barmar, Nov 23 '22 at 17:00
Protips: 1) The [center element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center) is deprecated. Don't use it. 2) Don't use line breaks for spacing. That's not their purpose. Use margin, padding, flex alignment, etc. 3) Consider using [event listeners](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#using_addeventlistener) instead of inline JavaScript. It's a more modern, abstracted way of handling events. — isherwood, Nov 23 '22 at 17:01
If you declare a variable inside a function (with let, const or var) it will be scoped to that function and not available outside. https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript — James, Nov 23 '22 at 17:03

Lakshya Raj · Accepted Answer · 2022-11-23T18:03:42.143

What you need to do is define what you're doing into two functions - one is the onclick that calculates the percentage, while another actually sets the wine height. Oh, that and the fact that you mispellled onClick as onCick. Try something like this:

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>

This level of abstraction allows you to control the wine height from anywhere via the setWineHeight function. It may turn out to be useful later on in your program. Also, as Barmar mentions, type="input" isn't valid. I'm assuming you meant type="range".

Let's say you want to cause a relative change in position rather than setting the value. You would need to get the current percentage, and add the amount of change. It would look something like this:

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>

The new addWineHeight function is actually pretty simple - it just calculates the new wine height based on the amount you want to add/remove. It also has some guards to prevent less than 0% wine, or more than 100%.

This answers my original question, thanks. If you wouldn't mind me asking on more, How could I go about adding or not clearing the value if I were to add another const? Like if I made `SGtest2()` function, would it be possible with the current format to make it go up by the value instead of replacing the height of the object all together? No worries if this isn't the right place to ask, I appreciate all the help! — Box, Nov 23 '22 at 17:42
@Box do you mean that the input 15 would make it go up 15% instead of setting the height to 15%? (and likewise -15 would make it go down 15%) — Lakshya Raj, Nov 23 '22 at 17:46
@Box I added `addWineHeight` to the end of my answer. See if that's what you needed. — Lakshya Raj, Nov 23 '22 at 18:04
That's exactly it! I modified it from a text entry to a static value, but the code functions exactly as I needed to before I head to bed. Thanks for your thought-out explanations as well. Very helpful. — Box, Nov 23 '22 at 18:23

How to set a var to a const value onClick JavaScript?

1 Answers1