CODEWITHSUNDEEP
javascript
Hench
Hench

Reputation: 59

About Javascript function - weather calculator -

I am making a weather calculator by using JS range slider in webpage. I am testing the add up function. The problem is at line 122, the code: 

outRest.innerHTML = add(outT, outH);

When I move the humidity bar, the add up result will not update. However, if I use the followimg code, it hasn't problem: 

outRest.innerHTML = parseInt(outT) + parseInt(outH);


var slider = document.getElementById("TEMP");
var outputTemp = document.getElementById("tempC");
var outputTemp2 = document.getElementById("tempF");

var slider2 = document.getElementById("HUMD");
var outputHumd = document.getElementById("humd");

var outRest = document.getElementById("test");
var outT = slider.value;
var outH = slider2.value;
var add = parseInt(outT) + parseInt(outH);

outRest.innerHTML = add;

outputTemp.innerHTML = slider.value;

outputTemp2.innerHTML = roundUp(CF(slider.value), 2);

slider.oninput = function() {
  outputTemp.innerHTML = this.value;
  outputTemp2.innerHTML = roundUp(CF(this.value), 2);
  outT = this.value;
  outRest.innerHTML = parseInt(outT) + parseInt(outH);
}

outputHumd.innerHTML = slider2.value;

slider2.oninput = function() {
  outputHumd.innerHTML = this.value;
  outH = this.value;
  outRest.innerHTML = add(outT, outH);
}

function CF(CF) {
  rest = (CF * (9 / 5)) + 32
  return rest
}

function roundUp(num, precision) {
  precision = Math.pow(10, precision)
  return Math.ceil(num * precision) / precision
}

function add(T, H) {
  rest = parseInt(T) + parseInt(H)
  return rest
}
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

</style><style>.slider2 {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider2::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider2::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}
<h1>Calculator</h1>
<p>Drag the slider to display the current value.</p>

<div class="slidecontainer">
  <input type="range" min="0" max="100" value="50" class="slider" id="TEMP">
  <p>Temperature: <span id="tempC"></span> ℃ (<span id="tempF"></span> °F)</p>

</div>

<div class="slidecontainer">
  <input type="range" min="0" max="100" value="50" class="slider2" id="HUMD">
  <p>Humidity: <span id="humd"></span> %</p>
</div>

<div>
  <p>Test: <span id="test"></span> %</p>
</div>

Upvotes: 1

Views: 190

Answers (3)

Mister Jojo
Mister Jojo

Reputation: 22310

You can also directly get numeric value ( for type="number" / type="range" ...)

with inputElement.valueAsNumber

sample code

const calculForm = document.getElementById('calcul-form')
  ,   CF         = cf => (cf *9 /5 +32).toFixed(2)
  ;
function setTempHum()
  {
  let temp = calculForm.TEMP.valueAsNumber
    , humd = calculForm.HUMD.valueAsNumber
  ;
  calculForm.valTEMP.value = `${temp} ℃  --  ${CF(temp)} °F` 
  calculForm.valHUMD.value = `${humd} %` 

  calculForm.test.value = temp + humd
  }

setTempHum()  // first time

calculForm.oninput = setTempHum
fieldset { width: 80%; margin: .5em; padding: 1em;}
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}
<form id="calcul-form" onsubmit="return false">
  <fieldset>
    <input type="range" min="0" max="100" value="50" name="TEMP">
    <p>Temperature : <output name="valTEMP"></output></p>
  </fieldset>
  <fieldset>
    <input type="range" min="0" max="100" value="50" name="HUMD">
    <p>Humidity : <output name="valHUMD"></output></p>
  </fieldset>
  <fieldset>
      <p>Test : <output name="test"></output></p>
  </fieldset>
</form>

Upvotes: 0

Qonvex620
Qonvex620

Reputation: 3972

just remove this line

var add = parseInt(outT) + parseInt(outH);

as you can see, you have this error because javascript is expecting that you are using 'add' as a function not a variable it's because you are passing two arguments, the 'outT' and 'outH' variables.

 TypeError: add is not a function

Upvotes: 0

Ray
Ray

Reputation: 1676

You are trying use add as a function, 

outRest.innerHTML = add(outT, outH);

however it's a variable (You can remove this code).

var add = parseInt(outT) + parseInt(outH);

I can see that you have declared an add function already:

function add(T, H) {
  rest = parseInt(T) + parseInt(H)
  return rest
}

You can simply return the value if you have no other usage of that variable

function CF(CF) {
      return (CF * (9 / 5)) + 32
}

function add(T, H) {
  return parseInt(T) + parseInt(H);
}

Result:

var slider = document.getElementById("TEMP");
var outputTemp = document.getElementById("tempC");
var outputTemp2 = document.getElementById("tempF");

var slider2 = document.getElementById("HUMD");
var outputHumd = document.getElementById("humd");

var outRest = document.getElementById("test");
var outT = slider.value;
var outH = slider2.value;
//Remove this line
//var add = parseInt(outT) + parseInt(outH);

outRest.innerHTML = add;

outputTemp.innerHTML = slider.value;

outputTemp2.innerHTML = roundUp(CF(slider.value), 2);

slider.oninput = function() {
  outputTemp.innerHTML = this.value;
  outputTemp2.innerHTML = roundUp(CF(this.value), 2);
  outT = this.value;
  outRest.innerHTML = parseInt(outT) + parseInt(outH);
}

outputHumd.innerHTML = slider2.value;

slider2.oninput = function() {
  outputHumd.innerHTML = this.value;
  outH = this.value;
  outRest.innerHTML = add(outT, outH);
}

function CF(CF) {
  return (CF * (9 / 5)) + 32
}

function roundUp(num, precision) {
  precision = Math.pow(10, precision)
  return Math.ceil(num * precision) / precision
}

function add(T, H) {
  return parseInt(T) + parseInt(H)
}
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

</style><style>.slider2 {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider2::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider2::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}
<h1>Calculator</h1>
<p>Drag the slider to display the current value.</p>

<div class="slidecontainer">
  <input type="range" min="0" max="100" value="50" class="slider" id="TEMP">
  <p>Temperature: <span id="tempC"></span> ℃ (<span id="tempF"></span> °F)</p>

</div>

<div class="slidecontainer">
  <input type="range" min="0" max="100" value="50" class="slider2" id="HUMD">
  <p>Humidity: <span id="humd"></span> %</p>
</div>

<div>
  <p>Test: <span id="test"></span> %</p>
</div>

Upvotes: 2

Related Questions