I have four text input fields, after the user enters relevant values, I have to make a JavaScript calculation to add all of them
I use:
var total = Number(value1) + Number(value2) + Number(value3) + Number(value4);
then I display the total:
document.getElementById("value5").innerHTML = total;
If one of the values is negative, it gets added as a positive number. How do I get the equation to treat it as a negative one (so it gets subtracted)?
I dont know what the problem is but it works well
<script type="text/javascript">
function fnc(){
val1=Number(document.getElementById("t1").value);
val2=Number(document.getElementById("t2").value);
var total = val1+val2;
document.getElementById("t3").value=total;
}
</script>
input1: <input type="text" id="t1" />
input2: <input type="text" id="t2" />
<br />
<input type="text" id="t3" />
<input type="button" id="btn" onclick="fnc()" value="click me" />
Related
I have a logic error and cant seem to find it. I think I am "getting" the elements by ID correctly, but it yields NAN. Any help with this is appreciated.
I am not sure what else I am doing wrong, any suggestions are welcome. I am new to DOM and not very familiar with Javascript.
var avgGrade
function calcAvg()
{
avgGrade = document.getElementById("finalExam") +
document.getElementById("homework") + document.getElementById("projects");
alert("Your average is " + avgGrade);
document.getElementById("stuAverage").value = avgGrade;
}
//-->
</script>
</head>
<body>
<h1>Calculate average</h1>
<h3>Enter the following information and then press the <b>AVERAGE</b> button
to calculate
your grade.</h3>
<p>To clear the data fields, click here <b>Refresh this page</b></p>
<form action="#" name="gradeInfo" id="gradeInfo">
<p>
Enter Final Exam Grade:
<input type="text" name="finalExam" id="finalExam" size="4" /><br />
Enter Homework Grade:
<input type="text" name="homework" id="homework" size="4" /><br />
Enter Projects Grade:
<input type="text" name="projects" id="projects" size="4" /><br />
<br /><br />
<input type="button" value="AVERAGE" onclick="calcAvg()" />
<br /><br />
Your Average is:
<input type="text" name="stuAverage" id="stuAverage" size="4" /><br />
</p>
</form>
</body>
</html>
First missing a ; at the end of var avgGrade
Second you need to get values of the inputs not the inputs itself.
document.getElementById("homework").value
Third you need to convert the values from string to integer using parseInt
avgGrade = parseInt(document.getElementById("finalExam").value) +
parseInt(document.getElementById("homework").value) +
parseInt(document.getElementById("projects").value);
jsfiddle DEMO
P.s. you gotta divide it to the number of grades to get the average.
to get the value in the input field you need to write -
document.getElementById("finalExam").value
I am trying to create a simple calculator that takes a number from 1 text box and after hitting a submit button it takes the number and multiplies it by 92 then puts it in a read only box.
This is what I have so far:
<form name="1star">
<input type="text" name="input"/>
<input type="button" value="Enter" OnClick="1star.output.value == 1star.input.value * 92"/>
<br/>
<input type="text" name="output" readonly="readonly" />
</form>
This is not working and I could use some help. I know its easy but I am very new to js and I'm not understanding why this isn't working.
<form name="onestar">
<input type="text" name="input"/>
<input type="button" value="Enter" OnClick="onestar.output.value = onestar.input.value * 92"/>
<br/>
<input type="text" name="output" readonly="readonly" />
</form>
An identifier cannot start with a digit in JavaScript, so 1star is an error. Also, you wanted = (assignment), not == (comparison).
That said, there are a number of outdated or beginner practices above. If I was writing it, I would separate the script from the markup, and I'd use document.getElementById to fetch the element rather than relying on implicit variables defined by name. I would also explicitly parse the string into a number. But for now no need to worry about it too much. Even though the code seems much more complicated at first glance, it's all things that will make your life easier later, with bigger programs.
var input = document.getElementById('input');
var output = document.getElementById('output');
var button = document.getElementById('button');
button.addEventListener('click', function(evt) {
var value = parseInt(input.value, 10);
if (!isNaN(value)) {
output.value = value * 92;
}
});
<form>
<input type="text" id="input"/>
<input type="button" id="button" value="Enter"/>
<br/>
<input type="text" id="output" readonly="readonly" />
</form>
http://jsfiddle.net/6mMUs/
I want to have live currency rate inputs for Euros, Dollars and Pounds.
<input type="text" id="eurorate" style="margin-bottom:15px;"> Euros <br />
<input type="text" id="dollarrate" style="margin-bottom:15px;"> Dollars <br />
<input type="text" id="poundrate" style="margin-bottom:15px;"> Pounds
What's the proper way of assigning a multiplier to each of these 3 currencies and have them respond to change in ANY of the inputs in real time?
for example, if a dollar is 0.75 euros and it is 0.60 Pounds, when I enter '1' in the dollar field, the other fields should show the correct values when converted to the other currencies.
I tried doing this with setInterval but it is not truly real time, I want to know what's the proper alternative using keyup or something like that.
Any help is appreciated.
Use an onkeyup event on your input fields, and when the event fires you update the other ones.
A simple Method to Covert Currency
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
function changeTo(toType){
if(toType=="Pound")
cvrate = 0.86;
else
cvrate = 0.78;
$(".currency_change").each(function (index, element) {
var og_val = $(this).data("og-value");
var cvd_val = (og_val*cvrate).toFixed(2);
return $(this).html(cvd_val);
});
}
</script>
</head>
<body>
<br /><span class="currency_change" data-og-value="1254">1254</span>
<br /><span class="currency_change" data-og-value="145">145</span>
<br /><span class="currency_change" data-og-value="54">54</span>
<br /><span class="currency_change" data-og-value="254">254</span>
<br /><span class="currency_change" data-og-value="147">147</span><br />
<button onClick="changeTo('Pound');">Conver To Pound</button>
<button onClick="changeTo('Euro');">Conver To Euro</button>
</body>
</html>
I'm currently writing some code using both HTML and Javascript. I'm building myself a mini Javascript calculator that can run simple additions using a HTML 'GUI' - if you take it that way. The code is below.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="stylesheet/calculator.css" type="text/css" rel="stylesheet" />
<script>
function activeButton() {
if (document.getElementById("radioAdd").checked === true) {
var valueOne = Number(document.getElementById("number1".value));
var valueTwo = Number(document.getElementById("number2".value));
var result = valueOne + valueTwo;
alert("Your Result Is " + result);
}
}
</script>
</head>
<body>
<div id="wrapper">
<div id="form-move">
<form name = "calculator" id="calculator">
<div id="numberInput">
<input type="number" name="inputNumber1" id="number1" placeholder="Type or Select Your First Number" />
<input type="number" name="inputNumber2" id="number2" placeholder="Type or Select Your Second Number" />
</div>
<div id="radio-input">
<span class="title">Operators:</span>
<input type="radio" name="radioInputAdd" id="radioAdd" value="Addition" />
<label for="radioAdd">Addition</label>
<input type="radio" name="radioInputAdd" id="radioDivision" value="Division" />
<label for="radioDivision">Division</label>
<input type="radio" name="radioInputAdd" id="radioMultiply" value="Multiplication" />
<label for="radioMultiply">Multiply</label>
<input type="radio" name="radioInputAdd" id="radioSubtract" value="Subtraction" />
<label for="radioSubtract">Subtract</label>
</div>
<div class="submit">
<input type="submit" value="Enter" id="submit" onclick="activeButton()" />
</div>
</form>
</div>
</div>
There are TWO input boxes in the middle of the page, which only accept numbers.
Underneath them are four radio buttons - Add, division, Multiply and Subtract. Now, You can see the javascript incorporated at the top of the page. The problem I have is that when I run the page and want to add two numbers, the code works but the answer comes out as 0. I have tested this in chrome and this happens all the time.
Could Someone Possibly please help?
The problem is in how you're trying to get the value from the input elements. In this code:
var valueOne = Number(document.getElementById("number1".value));
var valueTwo = Number(document.getElementById("number2".value));
You're trying to get the value property from the string "number1", which is undefined, then passing that to document.getElementById, which will return null, and then passing that to Number, which will return 0.
Try this this instead:
var valueOne = Number(document.getElementById("number1").value);
var valueTwo = Number(document.getElementById("number2").value);
Try this:
var valueOne = Number(document.getElementById("number1").value);
var valueTwo = Number(document.getElementById("number2").value);
You have the paranthesis in the wrong place.
This is my demo cord.
<input type="text" id="my_input1" />
<input type="text" id="my_input2" />
<input type="text" id="total" />
<input type="button" value="Add Them Together" onclick="doMath();" />
<script type="text/javascript">
function doMath()
{
// Capture the entered values of two input boxes
var my_input1 = document.getElementById('my_input1').value;
var my_input2 = document.getElementById('my_input2').value;
// Add them together and display
var sum = parseFloat(my_input1) + parseFloat(my_input2);
document.getElementById('total').value=sum;
}
I want to work this function when my_input2 is enter it's value. Just like onclick method for button is there any event to set value to total tetxfeild after key release event?
<script type="text/javascript">
$(document).ready(function () {
$("#my_input2").blur(function () {
var sum = parseInt($("#my_input1").val()) + parseInt($("#my_input2").val());
$("#total").val(sum);
});
});
</script>
<div>
<input type="text" id="my_input1" />
<input type="text" id="my_input2" />
<input type="text" id="total" />
<input type="button" value="Add Them Together" />
</div>
And also u should frame ur question correctly bcz u have added code in button click and asking us it should work after leaving textbox
Put onkeyup() on second input field this will fire your function.
Something like that:
<input type="text" id="my_input2" onkeyup="doMath();" />
try this
<input type="text" id="my_input2" onchange="doMath();" />