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

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 >
    <div id="wine-content">
    </div>
  </div>

  <div >
  </div>

  <div >
  </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>

CodePudding user response：

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 >
    <div id="wine-content">
    </div>
  </div>

  <div >
  </div>

  <div >
  </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 >
    <div id="wine-content">
    </div>
  </div>

  <div >
  </div>

  <div >
  </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%.