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;

How to make a number add on it'self and return the total every time the button is clicked?

i got the buttons that when cllicked they return the current and add on that very number, well that works fine but the button with 30
i want to return 30 on first output and when clciked again to add on 30 again thus output being 60 , 90 , 120 .......
HTML
<button data-value="1" class="numbs">1</button>
<button type="button" data-value="2" class="numbs">2</button>
<button type="button" data-value="3" class="numbs">3</button>
<button type="button" data-value="4" class="numbs">4</button>
<button type="button" data-value="30" class="numb">+30s</button>
<input type="number" min="1" id="inputOutput">
JS / JQUERY
$(document).ready(function(){
$('.numbs').click(function add(ev){
var values = ev.currentTarget.dataset.value;
console.log(values);
var inputOutput = $('#inputOutput');
var current = inputOutput.val();
inputOutput.val(current + values);
ev.stopPropagation();
});
//for +30s button
var $_30sec = $('.numb');
var num ;
var x = 30;
$_30sec.click(function addthithy(ev){
num = ev.currentTarget.dataset.value;
var total = Math.floor(num)+Math.floor(30);
var inputOutput = $('#inputOutput');
//this prints out 30 only;
var current = inputOutput.val(num);
// console.log(num);
//this prints out 60 only;
inputOutput.val(total);
console.log(total);
});
});
i actaully dont know how to do that for the increment to be add on 30 everytime the button is clicked;
am sorry in advance if the question was asked before but have searched everywhere couldn't find what i need to do;

update your code with below code
$(document).ready(function () {
$('.numbs').click(function add(ev) {
var values = ev.currentTarget.dataset.value;
console.log(values);
var inputOutput = $('#inputOutput');
var current = inputOutput.val();
inputOutput.val(current + values);
ev.stopPropagation();
});
//for +30s button
var $_30sec = $('.numb');
var num;
var x = 30;
$_30sec.click(function addthithy(ev) {
var inputOutput = $('#inputOutput');
var clickCount = $(this).attr('click-count');
inputOutput.val(parseInt(clickCount) * 30);
var newClickCount = parseInt(clickCount) + 1;
$(this).attr('click-count', newClickCount);
});
});
<button data-value="1" class="numbs">1</button>
<button type="button" data-value="2" class="numbs">2</button>
<button type="button" data-value="3" class="numbs">3</button>
<button type="button" data-value="4" class="numbs">4</button>
<button type="button" data-value="30" class="numb" click-count=1>+30s</button>
<input type="number" min="1" id="inputOutput">

How i can add value as number

i have problem because it code don't calculate value.
I wrote 11 and is Expenditure: 11, next i wrote 11 and is 1111, but i need 22 so i used minusValue.value += a;
Do you know where is error?
var minusCashField = document.getElementById('minusCashField');
minusCash.addEventListener("click", function() {
var a = minusCashField.value;
minusValue.value += a;
});
<div class="threeBox">
<div class="resultbutton">
<input class="minusValue" disabled id="minusValue" value=''>
</div>
</div>
</header>
<div class="addFunction">
<fieldset>
<label><strong>Expenditure:</strong></br></label>
<input placeholder="Enter Expenditure...." tabindex="2" required type="text" id="minusCashField">
<button type="submit" id="minusCash">Submit</button>
</fieldset>
</div>

input.value is returning a string, not a number.
You could convert the string to a number by using a unary plus +.
var number = +input.value;
// ^

your concatinating 2 strings you need to convert them to integers.
var minusCashField = document.getElementById('minusCashField');
minusCash.addEventListener("click", function() {
var a = parseInt(minusCashField.value || 0, 10);
minusValue.value = parseInt(minusValue.value || 0, 10) + a;
});

Because the values of those inputs will be strings, you need to convert the strings to numbers before any math operations can be performed - both the string value you assign to a, and the value contained in the results to which you add a.
minusCash.addEventListener("click", function() {
var a = Number(minusCashField.value);
minusValue.value = Number(minusValue.value) + a;
});

use parseInt() to convert the string to integer.
var minusCashField = document.getElementById('minusCashField');
minusCash.addEventListener("click", function() {
var a = parseInt(minusCashField.value || 0, 10);
minusValue.value = parseInt(minusValue.value || 0, 10) + a;
});
<div class="threeBox">
<div class="resultbutton">
<input class="minusValue" disabled id="minusValue" value=''>
</div>
</div>
</header>
<div class="addFunction">
<fieldset>
<label><strong>Expenditure:</strong></br></label>
<input placeholder="Enter Expenditure...." tabindex="2" required type="text" id="minusCashField">
<button type="submit" id="minusCash">Submit</button>
</fieldset>
</div>

Subtract value multiple times in JS

I have two textbox's. Textbox one has the remaining hp that it gets from a variable. Textbox two has a button that when you click it, it runs dmgNPC and subtracts the damage that you enter into the textbox from the hp text box.
The question i have is how do i get JS to subtract from the new value that it shown in the remaining hp textbox?
var hp = 10;
function dmgNPC(hp) {
var damage = document.getElementById("damage").value;
var theDMG = hp - damage;
return document.getElementById("remaining").value = theDMG;
}
<label for="damage">Damage to NPC</label>
<input type="text" id="damage">
<button type="button" onclick="dmgNPC(hp);">Enter Damage</button>
<br/>
<label for="remaining">Remaining Health</label>
<input type="text" id="remaining">

I think you want something like this
var hp = 10;
function dmgNPC() {
var damage = document.getElementById("damage").value;
hp -= damage;
document.getElementById("remaining").value = hp;
}
<label for="damage">Damage to NPC</label>
<input type="text" id="damage">
<button type="button" onclick="dmgNPC();">Enter Damage</button>
<br/>
<label for="remaining">Remaining Health</label>
<input type="text" id="remaining">

Geoffrey let me see if I understand this. You want to subtract from 10 at the beginning but after that take from the remaining value so you can work your way down to 0 health? If so here is the JS I wrote for that.
var hp = 10;
function dmgNPC(hp) {
if(document.getElementById("remaining").value){
var damage = document.getElementById("damage").value;
var theDMG = document.getElementById("remaining").value - damage;
}else{
var damage = document.getElementById("damage").value;
var theDMG = hp - damage;
}
document.getElementById("remaining").value = theDMG;
}