//I'm trying to get a result in meters out of an input in feet.
<div id="inner-wrapper">
<label for="feet-input">Enter feet
</label>
<input type="number" id="feet-input" placeholder="Feet">
<label for="result">Result
</label>
<div id="result"></div>
<button id="calculate" onclick="calculate()">Calculate</button>
<button id="clear" onclick="clear()">Clear</button>
</div>
//For any number I type I get 0 as answer.
var feetInput = document.getElementById("feet-input").value;
var result = document.getElementById("result");
var total;
function calculate(){
total = feetInput * 0.3048;
result.innerHTML = total;
return total;
}
function clear(){
feetInput.value = "";
result.value = "";
}
//For any number I type get 0 as result.
For any number I type get 0 as answer.
Because your var feetInput = document.getElementById("feet-input").value; is only executed once you need to fetch always latest value on function call as below
//var feetInput = document.getElementById("feet-input").value;//only executed once
var result = document.getElementById("result");
var total;
function calculate(){
var feetInput = document.getElementById("feet-input").value;
total = feetInput * 0.3048;
result.innerHTML = total;
return total;
}
function clear(){
feetInput.value = "";
result.value = "";
}
//For any number I type get 0 as result.
<div id="inner-wrapper">
<label for="feet-input">Enter feet
</label>
<input type="number" id="feet-input" placeholder="Feet">
<label for="result">Result
</label>
<div id="result"></div>
<button id="calculate" onclick="calculate()">Calculate</button>
<button id="clear" onclick="clear()">Clear</button>
</div>
The only issue that you have is that the value from feet-input is ONLY read when the page is loaded.
You'll need to get the value of feet-input before you do the calculation.
Just add var feetInput = document.getElementById("feet-input").value; to the line immediately after function calculate(){
Codepen: https://codepen.io/DeathCamel57/pen/xPPGrp?editors=0010
Related
sorry if it's silly.I want to add the numbers I entered in two separate inputs, but it doesn't work.
<body>
<input type="number" id="number1"/>
<input type="number" id="number2"/>
<button onclick="plus()">Sum</button>
<script>
function plus (){
let numberbox1 = document.getElementById("number1");
let numberbox2 = document.getElementById("number2");
let newnumber = numberbox1 + numberbox2;
let div = document.get.createElement("div");
div.innerText = newnumber ;
document.body.appendChild(div);
}
</script>
let div = document.getElementById("num");
function plus (){
let numberbox1 = +document.getElementById("number1").value;
let numberbox2 = +document.getElementById("number2").value;
let newnumber = numberbox1 + numberbox2;
console.log(newnumber)
div.textContent = newnumber;
}
<input type="number" id="number1"/>
<input type="number" id="number2"/>
<button onclick="plus()">Sum</button>
<div id="num"> </div>
I'm new to JavaScript. I'm to trying to assign a value to a variable that was getting by input in HTML. But it gives me the actual input if I assign the variable inside of the function only. I was trying to build a simple calculator. I will be thankful to you if you can help me. Refer to the following code.
let num1 = document.getElementById("input");
let num2 = document.getElementById("input2");
function myFunction() {
document.getElementById("p").innerHTML = num1 + num2;
}
<input Id="input">
<input Id="input2">
<button onClick="myFunction()">
<span id="p"></span>
let num1 = document.getElementById("input");
let num2 = document.getElementById("input2");
function myFunction() {
document.getElementById("p").innerHTML = parseInt(num1.value) + parseInt(num2.value);
}
<input Id="input">
<input Id="input2">
<button onClick="myFunction()">Add Numbers</button>
<span id="p"></span>
<script>
function myFunction() {
const num1 = document.getElementById("input").value;
const num2 = document.getElementById("input2").value;
document.getElementById("p").innerHTML = parseInt(num1) + parseInt(num2);
}
</script>
try this
<hmtl>
<head><title>Document</title></head>
<body>
<input Id = "input">
<input Id = "input2" >
<button onClick= 'myFunction(document.getElementById("input").value,document.getElementById("input2").value)'>
<span id="p"></span>
<script>
function myFunction(n1, n2){
document.getElementById("p").innerHTML = parseInt(n1)+parseInt(n2);
}
</script>
</body>
</html>
I have multiple sets of radio buttons where the selected values of each set need to be added and displayed to the user. So far I have been changing the values in the function in a switch statement to handle the addition.
<form name="config" id="config">
<div class="row-fluid">
<h3>Memory</h3>
<input type="radio" name="section1" value="4gb" onclick="changePrice(0)" checked>4gb<br>
<input type="radio" name="section1" value="8gb" onclick="changePrice(100)">8gb (+$100)<br>
<input type="radio" name="section1" value="16gb" onclick="changePrice(200)">16gb (+$200)
</div>
<div class="row-fluid">
<h3>Primary Hard Drive</h3>
<input type="radio" name="section2" value="dell" onclick="changePrice(0)" checked>Dell<br>
<input type="radio" name="section2" value="asus" onclick="changePrice(100)">Asus(+$100)
</div>
</form>
<div id="price"></div>
The script I am using right now is
var displayPrice = document.getElementById("price");
var baseNum = 200;
displayPrice.innerHTML = baseNum;
function(changePrice){
var val1, val2;
switch(document.config.section1.value){
case "4gb":
val1 = 0;
break;
case "8gb":
val1 = 100;
break;
case "16gb":
val1 = 200;
break;
default:
val1 = 0;
}
switch(document.config.section2.value){
case "dell":
val1 = 0;
break;
case "asus":
val1 = 100;
break;
default:
val1 = 0;
}
var sum = val1 + val2 + baseNum;
displayPrice.innerHTML = sum;
}
Is there a way I can do these calculations using the parameters passed through the changePrice function (so I don't have to change the values in the switch statements)?
Here's how to do this without jQuery.
You'll need to tell the changePrice function which section it should change the price for so you'll need to change the calls to look like this changePrice(1, 100) where 1 is the section and 100 is the price change. Then you can collect all the section prices individually and sum them like so:
var displayPrice = document.getElementById("price");
var baseNum = 200;
displayPrice.innerHTML = baseNum;
var sections = {};
function changePrice(section,val){
// add or update the section value
sections[section] = val;
// start with the base price
var sum = baseNum;
// loop over all the sections and add them to the base price
for(var key in sections) {
sum = sections[key] + sum;
}
displayPrice.innerHTML = sum;
}
Here's a jsfiddle
If you change your function definition to the following, it will take in your parameter.
function changePrice(val1)
If you could change your the value attribute on each of your input fields to contain your increment value, it would make the process of calculating your sum much easier. (This may not be appropriate to the problem you are trying to solve.
Basic solution with jQuery
var sum = $("input[name=section1]").val() + $("input[name=section2]").val();
If your list is very long, you could iterate over your radio button sets with jQuery
var sum = 0;
$("input[type=radio]").each(function(){sum += $(this).val();});
<html>
<head>
<script type="text/javascript">
function DisplayPrice(price){
var val1 = 0;
for( i = 0; i < document.form1.R1.length; i++ ){
if( document.form1.R1[i].checked == true ){
val1 = document.form1.R1[i].value;
}
}
var val2 = 0;
for( i = 0; i < document.form2.R2.length; i++ ){
if(document.form2.R2[i].checked == true ){
val2 = document.form2.R2[i].value;
}
}
var sum=parseInt(val1) + parseInt(val2);
document.getElementById('totalSum').innerHTML=sum;
}
</script>
</head>
<body>
Choose a number:<br>
<form name="form1" id="form1">
<br>
R1 <input id="rdo_1" type="radio" value="5" name="R1" onClick="DisplayPrice(this.value);" checked>5
<br>
R1 <input id="rdo_2" type="radio" value="10" name="R1" onClick="DisplayPrice(this.value);">10
<br>
</form>
Choose another number:<br>
<form name="form2" id="form2">
<br>
R2 <input id="rdo_1" type="radio" value="15" name="R2" onClick="DisplayPrice(this.value);" checked>15
<br>
R2 <input id="rdo_2" type="radio" value="20" name="R2" onClick="DisplayPrice(this.value);">20
<br>
</form>
Your total is Rs = <span name="totalSum" id="totalSum" > 20</span>
</body>
</html>
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
I have been trying to figure out how to make it so that if a specific checkbox is checked, the total amount in a textbox gets 50.00 added to it when the submit button is clicked, before it submits the form. In fact, it would be better to have the update happen as soon as the checkbox is checked.
Here's what i tried so far:
<!DOCTYPE html>
<html>
<head>
<script>
function toggle(){
var indoorCamping = 50.00;
var total = 0.00;
if(document.getElementByName('fifty').is(':checked')){
total = (indoorCamping + document.getElementsByName('Amount').value);
document.getElementsByName('Amount').value = total;
}
else{
return;
}
}
</script>
</head>
<body>
<p>Click the button to trigger a function.</p>
<input type="checkbox" name="fifty" value="indoor"/>
<label for="Amount">Amount <span class="req">*</span> <span
id="constraint-300-label"></span></label><br />
<input type="text" class="cat_textbox" id="Amount" name="Amount" />
<p id="demo"></p>
<button onclick="toggle()">Click me</button>
</body>
</html>
The value of a text-input is always text (a string) initially. This value needs to be explicitly converted to a number before adding to it, otherwise it concatenates the text. So "20" would become "5020".
Borrowing mohkhan's code:
<script>
function toggle(checkbox){
var indoorCamping = 50.00;
var total = 0.00;
if(checkbox.checked){
total = (indoorCamping + document.getElementById('Amount').value * 1);
document.getElementById('Amount').value = total;
}
}
</script>
I've multipled by 1 which is one way to convert "20" to a number. Number(x), parseInt(x) and parseFloat(x) are other ways.
I would prefer to use an object variable though, amt:
<script>
function toggle(checkbox) {
var indoorCamping = 50.00;
var total = 0.00;
var amt = null;
if (checkbox.checked) {
amt = document.getElementById('Amount');
total = (indoorCamping + amt.value * 1);
amt.value = total;
}
}
</script>
Add the click event on the checkbox then. Like this...
<input type="checkbox" name="fifty" value="indoor" onclick="toggle(this);"/>
And then in your script...
<script>
function toggle(checkbox){
var indoorCamping = 50.00;
var total = 0.00;
if(checkbox.checked){
total = (indoorCamping + document.getElementById('Amount').value);
document.getElementById('Amount').value = total;
}
}
</script>