Develop Reference

How can I grab an HTML slider value as an integer for JavaScript?

I'm trying to obtain a value out of an HTML slider so I can dynamically use it as an integer in JavaScript.The problem I'm having is I can't seem to use the value as a proper integer.
For example, if my slider value was 5 & if l tried to store it in a variable and add 10, it would output as '510' instead.
Maybe I'm an idiot and missing something very fundamental or simple, but it always ends up as a string in the end.I have tried parseInt() as well, but it doesn't seem to help.
I've set up a simple example of code below:
JS
var sliderUnit = document.getElementById("slider");
var outputUnit = document.getElementById("amtOutput");
var a = 0;
var b = 10;
outputUnit.innerHTML = sliderUnit.value;
sliderUnit.oninput = function(){
outputUnit.innerHTML = this.value;
console.log(sliderUnit.value);
a = this.value;
parseInt(a);
}
function test(){
b += a;
console.log("b: " + b + " | a: " + a);
}
HTML
<div class="sliderContainer">
<input type="range" min="1" max="15" value="7" id="slider">
<input type="submit" value="Submit" onclick="test()" />
| Slider number: <span id="amtOutput"></span>
</div>

The problem is that your are calling the parseInt(a) but the returned Integer value is not being handled properly, you should do as this a = parseInt(a);
var sliderUnit = document.getElementById("slider");
var outputUnit = document.getElementById("amtOutput");
var a = 0;
var b = 10;
outputUnit.innerHTML = sliderUnit.value;
sliderUnit.oninput = function(){
outputUnit.innerHTML = this.value;
console.log(sliderUnit.value);
a = this.value;
a = parseInt(a); // Change this line
}
function test(){
b += a;
console.log("b: " + b + " | a: " + a);
}
<div class="sliderContainer">
<input type="range" min="1" max="15" value="7" id="slider">
<input type="submit" value="Submit" onclick="test()" />
| Slider number: <span id="amtOutput"></span>
</div>
If not the variable a will continue to be a string becouse it wasn't changed

You need to parse the string as int using parseInt.
Working code:
var sliderUnit = document.getElementById("slider");
var outputUnit = document.getElementById("amtOutput");
var a = 0;
var b = 10;
outputUnit.innerHTML = sliderUnit.value;
sliderUnit.oninput = function(){
outputUnit.innerHTML = this.value;
console.log(sliderUnit.value);
a = this.value;
parseInt(a);
}
function test(){
b = parseInt(b)
a = parseInt(a);
b += a;
console.log("b: " + b + " | a: " + a);
}
<div class="sliderContainer">
<input type="range" min="1" max="15" value="7" id="slider">
<input type="submit" value="Submit" onclick="test()" />
| Slider number: <span id="amtOutput"></span>
</div>
Working JSFiddle

Javascript form not submitting

I'm making a webpage that converts temperature. I have it all set up using a form but my answers will not submit. I tried using the ways to input information through a form and tried to see if I'm missing anything but am unable to see it.
function fahrenheit() {
//Declare variables
var fahrenheit, celsius, c, f, crounded;
//Receive values
fahrenheit = document.getElementById("inputf").value;
//Parse strings to numerics
f = parseInt(fahrenheit);
c = parseInt(celsius);
//Calculations
f = (9/5 * c) + 32;
c = 5/9 * (f -32);
crounded = c.toFixed(2);
//Answer
document.getElementById("first").value = crounded;
}
function celsius() {
//Declares variables
var fahrenheit, celsius, c, f, frounded;
//Receive values
celsius = document.getElementById("inputc").value;
//Parse strings to numerics
c = parseInt(celsius);
f = parseInt(fahrenheit);
//Calculations
c = 5/9 * (f-32);
f = (9/5 * c) + 32;
frounded = f.toFixed(2);
//Answer
document.getElementById("second").value = frounded;
}
<h2>Temperature Conversion</h2>
<div id="convertF" name="convertF">
<form id="first" name="first">
<p><label>Fahrenheit:</label><input type="number" id="inputf" name="inputf"></p>
<p>Celsius:<input type="text" readonly id="outputc" name="outputc"></p>
<input type="button" onclick="fahrenheit()" value="Submit Fahrenheit">
<input type="reset" value="Reset">
</form>
</div>
<br>
<br>
<div id="convertC" name="convertC">
<form id="second" name="second">
<p><label>Celsius:</label><input type="number" id="inputc" name="inputc"></p>
<p>Fahrenheit:<input type="text" readonly id="outputf" name="outputf"></p>
<input type="button" onclick="celsius()" value="Submit Celsius">
<input type="reset" value="Reset">
</form>

Please check your updated code below :
function fahrenheit() {
//Declare variables
/*var fahrenheit, celsius, c, f, crounded;
//Receive values
fahrenheit = document.getElementById("inputf").value;
//Parse strings to numerics
f = parseInt(fahrenheit);
c = parseInt(celsius);
//Calculations
f = (9/5 * c) + 32;
c = 5/9 * (f -32);
crounded = c.toFixed(2);
//Answer
document.getElementById("outputc").value = crounded;*/
x = (document.getElementById("inputf").value -32) * 5 / 9;
document.getElementById("outputc").value = Math.round(x);
}
function celsius() {
//Declares variables
/*var fahrenheit, celsius, c, f, frounded;
//Receive values
celsius = document.getElementById("inputc").value;
//Parse strings to numerics
c = parseInt(celsius);
f = parseInt(fahrenheit);
//Calculations
c = 5/9 * (f-32);
f = (9/5 * c) + 32;
frounded = f.toFixed(2);
//Answer
document.getElementById("outputf").value = frounded;*/
x = document.getElementById("inputc").value * 9 / 5 + 32;
document.getElementById("outputf").value = Math.round(x);
}
<h2>Temperature Conversion</h2>
<div id="convertF" name="convertF">
<form id="first" name="first">
<p><label>Fahrenheit:</label><input type="number" id="inputf" name="inputf"></p>
<p>Celsius:<input type="text" readonly id="outputc" name="outputc"></p>
<input type="button" onclick="fahrenheit()" value="Submit Fahrenheit">
<input type="reset" value="Reset">
</form>
</div>
<br>
<br>
<div id="convertC" name="convertC">
<form id="second" name="second">
<p><label>Celsius:</label><input type="number" id="inputc" name="inputc"></p>
<p>Fahrenheit:<input type="text" readonly id="outputf" name="outputf"></p>
<input type="button" onclick="celsius()" value="Submit Celsius">
<input type="reset" value="Reset">
</form>

function fahrenheit() {
//your codes here
document.getElementById("first").submit();
}
function celsius() {
//your codes here
document.getElementById("second").submit();
}

Need to set the output into the output textbox id instead of form id.
document.getElementById("first").value = crounded;
need to replace by
document.getElementById("outputc").value = crounded;
same goes for
document.getElementById("second").value = frounded;
should be
document.getElementById("outputf").value = frounded;

Getting value from textbox with javascript

Here is my code. No idea why it is not working need help inspecting my code.
I'm trying to calculate the average and sum from the value input by the user. The html works well but my javascript code is somehow wrong. Help please
< script >
function calc() {
int a = parseInt(document.getElementsByName("english").value);
int b = parseInt(document.getElementsByName("bmelayu").value);
int c = parseInt(document.getElementsByName("math").value);
int d = parseInt(document.getElementsByName("geo").value);
int e = parseInt(document.getElementsByName("hist").value);
int sum = a + b + c + d + e;
int average = (a + b + c + d + e) / 5;
document.getElementById("sum").innerHTML = sum;
document.getElementById("average").innerHTML = average;
} < /script>
<html>
<head>
<title>Assignment3</title>
</head>
<script>
function calc() {
int a = parseInt(document.getElementsByName("english").value);
int b = parseInt(document.getElementsByName("bmelayu").value);
int c = parseInt(document.getElementsByName("math").value);
int d = parseInt(document.getElementsByName("geo").value);
int e = parseInt(document.getElementsByName("hist").value);
int sum = a + b + c + d + e;
int average = (a + b + c + d + e) / 5;
document.getElementById("sum").innerHTML = sum;
document.getElementById("average").innerHTML = average;
}
</script>
<body>
<form name="form1">
English :
<input type="number" name="english">
<br>Bahasa Melayu :
<input type="number" name="bmelayu">
<br>Math :
<input type="number" name="math">
<br>Geography :
<input type="number" name="geo">
<br>History :
<input type="number" name="hist">
<br>
<button onclick="calc()">Calculate</button>
</form>
<p id="sum"></p>
<p id="average"></p>
</body>
</html>

function calc() {
var a = parseInt(document.getElementById("english").value);
var b = parseInt(document.getElementById("bmelayu").value);
var c = parseInt(document.getElementById("math").value);
var d = parseInt(document.getElementById("geo").value);
var e = parseInt(document.getElementById("hist").value);
console.log(a);
var sum = a + b + c + d + e;
var average = (a + b + c + d + e) / 5;
document.getElementById("sum").innerHTML = sum;
document.getElementById("average").innerHTML = average;
}
<html>
<head>
<title>Assignment3</title>
</head>
<body>
English :
<input type="number" id="english">
<br>Bahasa Melayu :
<input type="number" id="bmelayu">
<br>Math :
<input type="number" id="math">
<br>Geography :
<input type="number" id="geo">
<br>History :
<input type="number" id="hist">
<br>
<button onclick="calc();">Calculate</button>
<p id="sum"></p>
<p id="average"></p>
</body>
</html>

function calc() {
var a = parseInt(document.getElementsByName("english")[0].value);
var b = parseInt(document.getElementsByName("bmelayu")[0].value);
var c = parseInt(document.getElementsByName("math")[0].value);
var d = parseInt(document.getElementsByName("geo")[0].value);
var e = parseInt(document.getElementsByName("hist")[0].value);
var sum = a + b + c + d + e;
var average = (a + b + c + d + e) / 5;
document.getElementById("sum").innerHTML = sum;
document.getElementById("average").innerHTML = average;
}

Hey I'm glad you found your answer, but I thought it might help you out if you see a different approach:
function calc() {
var elements = Array.prototype.slice.call(document.querySelectorAll(".grade-val"));
var grades = elements.map(function(element) {
return element.value;
});
var sum = grades.reduce(function(s, c) {
return parseInt(s, 10) + parseInt(c, 10);
});
var average = sum / grades.length;
document.getElementById("sum").innerHTML = sum;
document.getElementById("average").innerHTML = average;
}
<html>
<head>
<title>Assignment3</title>
</head>
<body>
English :
<input type="number" class="grade-val" name="english">
<br>Bahasa Melayu :
<input type="number" class="grade-val" name="bmelayu">
<br>Math :
<input type="number" class="grade-val" name="math">
<br>Geography :
<input type="number" class="grade-val" name="geo">
<br>History :
<input type="number" class="grade-val" name="hist">
<br>
<button onclick="calc();">Calculate</button>
<p id="sum"></p>
<p id="average"></p>
</body>
</html>
Note that I've added a class grade-val on each of the elements, if you simply want to add another subject to be taken into consideration you don't have to modify the code but only the markup (insert new element with the same class). Simple as that.
This is going to work on IE8+

I have fixed your snippet - you have made a number of errors there. Now it works
function calc() {
var a = parseInt(document.getElementsByName("english")[0].value);
var b = parseInt(document.getElementsByName("bmelayu")[0].value);
var c = parseInt(document.getElementsByName("math")[0].value);
var d = parseInt(document.getElementsByName("geo")[0].value);
var e = parseInt(document.getElementsByName("hist")[0].value);
var sum = a + b + c + d + e;
var average = (a + b + c + d + e) / 5;
document.getElementById("sum").innerHTML = sum;
document.getElementById("average").innerHTML = average;
}
<html>
<head>
<title>Assignment3</title>
</head>
<script>
function calc() {
int a = parseInt(document.getElementsByName("english")[0].value);
int b = parseInt(document.getElementsByName("bmelayu")[0].value);
int c = parseInt(document.getElementsByName("math")[0].value);
int d = parseInt(document.getElementsByName("geo")[0].value);
int e = parseInt(document.getElementsByName("hist")[0].value);
int sum = a + b + c + d + e;
int average = (a + b + c + d + e) / 5;
document.getElementById("sum").innerHTML = sum;
document.getElementById("average").innerHTML = average;
}
</script>
<body>
<form name="form1">
English :
<input type="number" name="english">
<br>Bahasa Melayu :
<input type="number" name="bmelayu">
<br>Math :
<input type="number" name="math">
<br>Geography :
<input type="number" name="geo">
<br>History :
<input type="number" name="hist">
<br>
<button onclick="calc()">Calculate</button>
</form>
<p id="sum"></p>
<p id="average"></p>
</body>
</html>

I want my javascript function output on a new tab

This is my simple javascript function to add two numbers, here this function displays output on my textfield whose id is c , I want to display output in a new tab
function add(){
var a = document.getElementById("num1").value;
a = parseInt(a);
var b = document.getElementById("num2").value;
b = parseInt(b);
var c = a+b;
document.getElementById("answer").value = c;
}

You can open a new tab using:
window.open("Your-URL-here","_BLANK");

try this code
function add(){
var a = document.getElementById("num1").value;
a = parseInt(a);
var b = document.getElementById("num2").value;
b = parseInt(b);
var c = a+b;
var w=window.open("")
w.document.write(c)
}
<input id="num1" type="number" />
<input id="num2" type="number" />
<input type="button" value="Add" onclick="add();return false" />

Auto calculation occurs on previous value

i have a function that increments a number, takes the total and multiplies it by a price. However, when I click the button that increments for the first time it doesn't do anything. I click the button a second time and it works. However if I then click the button that decreases, then it does the previous function (e.g. adding) then pressing it a second time will decrease the value.
I understand that the onClick="myFunction()" may be in the wrong place, however I don't know where to put it. I want the total to be calculated automatically. A demo can be found at http://alpha.kentishtours.co.uk/destinations/bruges.php
The function that takes the value and multiplies it and calculates the total.
function myFunction()
{
var a = document.getElementById('adult').value;
z=39;
x=a*z;
var c = document.getElementById('child').value;
if(a >= 1) {
a=+30; }
else {
a=+39; }
b=c;
c=a*b
d=x+c
document.getElementById("total").innerHTML=d;
document.getElementById("value").value = d;
}`
These are the buttons that increment the number and call the function to calculate.
<div class="calculator">
<div class="calculator-submodule input-group">
<h4>Adult (12+)</h4>
<button class="btn theme-btn" id="decrease" value="Decrease Value" onClick="myFunction()" >-</button>
<input type="text" id="adult" value="1" class="form-control input-usmall" min="0" disabled>
<button class="btn theme-btn" id="increase" value="Increase Value" onClick="myFunction()" >+</button>
</div>
<div class="calculator-submodule input-group">
<h4>Child (2-11)</h4>
<button class="btn theme-btn" id="decreasec" value="Decrease Value" onClick="myFunction()" >-</button>
<input type="text" id="child" value="0" class="form-control input-usmall" min="0" disabled>
<button class="btn theme-btn" id="increasec" value="Increase Value" onClick="myFunction()" >+</button>
</div>
<div class="calculator-submodule">
<span class="pound">£</span>
<span id="total">39</span><span class="pound">.00</span>
</div>

You have functions in your increment.js script that change the value of the input after you get them in "myfuntion". You need to calculate the prices after the values are changed.
So first you should remove the lines below from this file:
http://alpha.kentishtours.co.uk/assets/scripts/increment.js
$("#increase").click(function(){
var $n = $("#adult");
$n.val(Number($n.val())+1);
});
$("#decrease").click(function(){
var $n = $("#adult");
$n.val(Number($n.val())-1);
});
$("#increasec").click(function(){
var $n = $("#child");
$n.val(Number($n.val())+1);
});
$("#decreasec").click(function(){
var $n = $("#child");
$n.val(Number($n.val())-1);
});
Also remove the onClick="myFunction()" attribute in your HTML form.
Then change all your myFunction script to this:
var adult = $('#adult'),
child = $('#child'),
total = $('#total'),
value = $('#value'),
increase = $('#increase'),
decrease = $('#decrease'),
increasec = $('#increasec'),
decreasec = $('#decreasec');
var calulate_price = function(a, c){
var p1 = 39,
p2 = 30,
PA = a * p1,
PC, d;
if(a >= 1) PC = c * p2;
else PC = c * p1;
d = PA + PC;
total.text(d);
value.val(d);
};
increase.click(function(){
var a = Number(adult.val());
var c = Number(child.val());
adult.val(++a);
calulate_price(a, c);
});
decrease.click(function(){
var a = Number(adult.val());
var c = Number(child.val());
adult.val(--a);
calulate_price(a, c);
});
increasec.click(function(){
var a = Number(adult.val());
var c = Number(child.val());
child.val(++c);
calulate_price(a, c);
});
decreasec.click(function(){
var a = Number(adult.val());
var c = Number(child.val());
child.val(--c);
calulate_price(a, c);
});
Everything working: http://jsbin.com/ohUniCa/2/edit?js,output