I have been teaching myself some Javascript; and I am having trouble getting this function to run properly.
This is what is being output.
Answer: [object HTMLInputElement][object HTMLInputElement]
function addNumbers() {
var firstNum = document.getElementById("num1");
var secondNum = document.getElementById("num2");
result = firstNum + secondNum;
document.getElementById("demo").innerHTML = "Answer: " + result;
return result;
}
<!DOCTYPE html>
<html>
<head>
<!-- ,<script src="scripts.js"></script> -->
</head>
<body>
<h2>JavaScript Functions</h2>
<p>This example calls a function which performs a calculation and returns the result:</p>
<form>
First Number<br>
<input type="text" name="firstNum" id="num1"><br> Second Number<br>
<input type="text" name="secondNum" id="num2"><br>
<input type="button" value="Add!" onclick="addNumbers()">
</form>
<p id="demo"></p>
</body>
</html>
Like the comments said, get the value from the HTML element node and parse it into a float
var firstNum = parseFloat(document.getElementById("num1").value);
var secondNum = parseFloat(document.getElementById("num2").value);
function addNumbers() {
var firstNum = parseFloat(document.getElementById("num1").value);
var secondNum = parseFloat(document.getElementById("num2").value);
result = firstNum + secondNum;
document.getElementById("demo").innerHTML = "Answer: " + result;
return result;
}
<!DOCTYPE html>
<html>
<head>
<!-- ,<script src="scripts.js"></script> -->
</head>
<body>
<h2>JavaScript Functions</h2>
<p>This example calls a function which performs a calculation and returns the result:</p>
<form>
First Number<br>
<input type="text" name="firstNum" id="num1"><br> Second Number<br>
<input type="text" name="secondNum" id="num2"><br>
<input type="button" value="Add!" onclick="addNumbers()">
</form>
<p id="demo"></p>
</body>
</html>
Related
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="Author" content="Micah Cave">
<title>Ice 11</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#convert").click( function() {
var dollarAmount = $('input:text').val();
if ( $("#usa").is(':checked') )
dollarAmount = dollarAmount*1;
if ( $("#russia").is(':checked') )
dollarAmount = dollarAmount * 73.18;
});
});
</script>
</head>
<body>
<h1>Cave</h1>
<h2>Part 1B</h2>
<p>Type in the starting amount (in US dollars) here: <input type="text"></p>
<input type="checkbox" id="usa">US Dollars <br>
<input type="checkbox" id="russia">Russian Ruble <br>
<input type="checkbox" id="france">France Francs <br>
<input type="checkbox" id="japan">Japanese Yen <br>
<input type="button" id="convert" value="Convert currency(s)">
<p id="pasteHere"></p>
</body>
</html>
So I need to take the value that's entered in the input box above, and then if they check off any box(s) to then convert each checked boxs currency from US to whatever was selected, and then print out the results each time using if statements.
you can make a function called convert,when convert button click or checkbox click then call that function.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="Author" content="Micah Cave">
<title>Ice 11</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#convert").click(convert);
$("input:checkbox").click(convert)
});
function convert(){
var dollarAmount = $('input:text').val();
var result = " "
if ( $("#usa").is(':checked') )
result += dollarAmount*1 + ";";
if ( $("#russia").is(':checked') )
result += dollarAmount * 73.18 + ";";
$("#pasteHere").text(result)
}
</script>
</head>
<body>
<h1>Cave</h1>
<h2>Part 1B</h2>
<p>Type in the starting amount (in US dollars) here: <input type="text"></p>
<input type="checkbox" id="usa">US Dollars <br>
<input type="checkbox" id="russia">Russian Ruble <br>
<input type="checkbox" id="france">France Francs <br>
<input type="checkbox" id="japan">Japanese Yen <br>
<input type="button" id="convert" value="Convert currency(s)">
<p id="pasteHere"></p>
</body>
</html>
That is my solution:
$(document).ready(function() {
let selectedCurrencies = [];
$("#convert").click(function() {
let dollarAmount = $('input:text').val();
let checkBoxList = $('input:checked');
let resultText = "";
for (let i = 0; i < checkBoxList.length; i++) {
resultText += "US "+dollarAmount+" dollar =";
switch (checkBoxList[i].id) {
case 'usa':
resultText += dollarAmount * 1;
break;
case "russia":
resultText += dollarAmount * 73.18;
break;
}
resultText+=" "+(checkBoxList[i].nextSibling.textContent)+"<br>";
}
$("#pasteHere").html(resultText);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Cave</h1>
<h2>Part 1B</h2>
<p>Type in the starting amount (in US dollars) here: <input type="text"></p>
<input type="checkbox" id="usa">US Dollars <br>
<input type="checkbox" id="russia">Russian Ruble <br>
<input type="checkbox" id="france">France Francs <br>
<input type="checkbox" id="japan">Japanese Yen <br>
<input type="button" id="convert" value="Convert currency(s)">
<p id="pasteHere"></p>
I want a webpage that has something like this:
Welcome
[textbox] [textbox] [Multiply!]
Enter a value to multiply.
represented by this html code:
window.onload = function begin() {
document.getElementById("demo").innerHTML = "Welcome";
}
function multiply(var1, var2) {
document.getElementById('multiply').innerHTML = var1 * var2
}
<body onload="onload();">
<p id='demo'> </p>
<form>
<input type='number' name=num1>
<input type='number' name=num2>
<button onclick=multiply(num1, num2)> Multiply! </button>
</form>
<p id='multiply'> Enter a value to multiply. </p>
</body>
You lack " in onclick, and I changed the script. I also removed unnecessary elements. Just add them back in your codes
EDIT
I returned the <form> tag and added the type="button" attribute to prevent the form from submitting. Thanks to #Patrick Roberts and #Nick Tirrell for the information
function multiply() {
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
document.getElementById('multiply').innerHTML = num1 * num2
}
<form>
<input id="num1" type='number'>
<input id="num2" type='number'>
<button type="button" onclick="multiply()"> Multiply! </button>
<p id='multiply'> Enter a value to multiply. </p>
</form>
give each input an id attribute then use that to get the value(s) to multiply, e.g. document.getElementById("my-id-1").value. Also, use a basic
doc.getElementById("my-button").addEventListener('click', function(evt) {
//do your thing.
});
<!DOCTYPE html>
<html>
<head>
<title> Test </title>
</head>
<body>
<form>
<input type='number' id='num1'>
<input type='number' id='num2'>
<button type='button' onclick="multiply()"> Multiply! </button>
</form>
<p id='multiply'> Enter a value to multiply. </p>
<script src="01_using_javascript.js"> </script>
</body>
</html>
function multiply() {
var numberOne = document.getElementById('num1').value;
var numberTwo = document.getElementById('num2').value;
var multiply = document.getElementById('multiply');
var multipliedResult = numberOne * numberTwo;
multiply.innerHTML = multipliedResult;
}
What do I have to do to define oppstart ? Is this the reason why the calculator isn't working ? I do not get any result when clicking calculate, however the rest of the code seems to work.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<p>Vekt:
<input type="text" id="txtVekt" />
<br />
<p>Hoyde:
<input type="text" id="txtHoyde" />
</p>
<button id="btnBeregn">Beregn</button>
<p id="resultat"></p>
<script>
window.onload = oppstart;
function beregn() {
var hoyde = document.getElementById("txtHoyde").value;
var vekt = document.getElementById("txtVekt").value;
var bmi = vekt / (hoyde * vekt);
document.getElementById("resultat").innerHTML = "Din BMI er: " + bmi;
}
</script>
</body>
</html>
replace oppstart by beregn
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<p>Vekt: <input type="text" id="txtVekt" /><br />
<p>Hoyde: <input type="text" id="txtHoyde" /></p>
<button id="btnBeregn">Beregn</button>
<p id="resultat"></p>
<script>
window.onload = beregn;
function beregn () {
var hoyde = document.getElementById("txtHoyde").value;
var vekt = document.getElementById("txtVekt").value;
var bmi = vekt / (hoyde * vekt);
document.getElementById("resultat").innerHTML = "Din BMI er: " + bmi;
}
</script>
</body>
</html>
<html>
<head>
<title>
Form
</title>
</head>
<body>
<script type="text/javascript">
function calculate (form)
{
cel = fah * 0.5555 - 32;
document.getElementById("finish").innerHTML = cel;
}
</script>
<form name="myform" action="" method="get"> Turn Fahrenheit to Celsius! <br>
<input type="number" name="fah">
<input type="button" name="button" value="calculate" onClick="calculate(this.form)">
<button type="reset" value="Reset">Reset</button>
</form>
<p id="finish">°C</p>
</body>
</html>
Edit1: Moved the inner.HTML into the Function
So the reset button is the only thing that works. Is it possible to calculate the math this way?
You asked a question on how to create a pizza form a while ago and you deleted it soon as it was down voted a few times.
The point to note here is, it is okay if a few people dislike your question. You've joined StackExchange not to gain points but to learn a few things. Your question could be helpful to a lot of others out there in this world. So here it is the answer to your pizza question
<html>
<body>
<p>A pizza is 13 dollars with no toppings.</p>
<form action="form_action.asp">
<input type="checkbox" name="pizza" value="Pepperoni" id="pep">Pepperoni + 5$<br>
<input type="checkbox" name="pizza" value="Cheese" id="che">Cheese + 4$<br>
<br>
<input type="button" onclick="myFunction()" value="Send order">
<input type="button" onclick="cost()" value="Get cost">
<br><br>
<input type="text" id="order" size="50">
</form>
<script>
function myFunction() {
var pizza = document.forms[0];
var txt = "";
var i;
for (i = 0; i < pizza.length; i++) {
if (pizza[i].checked) {
txt = txt + pizza[i].value + " ";
}
}
document.getElementById("order").value = "You ordered a pizza with: " + txt;
}
function cost() {
var pep = 5;
var che = 4;
var pizza = 13;
var total = 0;
if (document.getElementById("pep").checked === true) {
total += pep;
}
if (document.getElementById("che").checked === true) {
total += che;
}
document.getElementById("order").value = "The cost is : " + total;
}
</script>
</body>
</html>
Thanks. I hope this helps you.
Adeno Fixed it by declaring what fah was. you can also see your errors with f12.
https://stackoverflow.com/users/965051/adeneo
<html>
<head>
<title>
Form
</title>
</head>
<body>
<script type="text/javascript">
function calculate(form) {
var cel = (document.getElementById("fah").value -32) * 5 / 9;
document.getElementById("finish").innerHTML = cel;
}
</script>
<form name="myform" action="" method="get"> Turn Fahrenheit to Celsius!
<br>
<input type="number" name="fah" id="fah">
<input type="button" name="button" value="calculate" onClick="calculate(this.form)">
<button type="reset" value="Reset">Reset</button>
</form>
<p id="finish">°C</p>
</body>
You never get the value from the input type = "number"
Try this
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
function calculate()
{
var fah = document.getElementById('fah').value;
var cel = parseFloat(fah * 0.5555 - 32);
document.getElementById("finish").innerHTML = cel;
}
</script>
</head>
<body>
<form>
Turn Fahrenheit to Celsius! <br>
<input type="text" name="fah" id="fah">
<input type="button" name="button" value="calculate" onClick="calculate()">
<button type="reset" value="Reset">Reset</button>
</form>
<p id="finish">°C</p>
</body>
</html>
Couple things: You need to set the innerhtml from within the function because the variable is in the function. Or you could have declared the variable outside the function first like var fah = "" then the function. But since you declared it in the function only the function can see it. So i moved the innerhtml set into the function.
Also, javascript likes to use id's not name = "fah" You can call an element by name but id is easier.
i rounded it to integer. you would get 9 decimals your way.
Lastly, innerhtml set clears all the html so you would lose the °C the way you had it.
<html>
<head>
<title>
Form
</title>
</head>
<body>
<script type="text/javascript">
function calculate (form)
{
var fah = this.fah.value;
cel = Math.round((fah-32) / 1.8);
document.getElementById("finish").innerHTML = cel+"°C";
}
</script>
<form name="myform" action="" method="get"> Turn Fahrenheit to Celsius! <br>
<input type="number" name="fah" id = "fah">
<input type="button" name="button" value="calculate" onClick="calculate(this.form)">
<button type="reset" value="Reset">Reset</button>
</form>
<p id="finish"></p>
</body>
</html>
I'm making just a simple math learning helper to help me learn javascript. I want to refresh The textbox after a wrong answer(the page refreshes after a right answer to get a new question), but I want the question to be the same if you get it wrong. Here's my code:
<!doctype html>
<body>
<center>
<font size="5">
<form Id="Input">
<input type="text" name="Input">
<input type="button" value="submit" ID="Button">
</form>
<script type="text/javascript">
Button.addEventListener("click", Answer);
var A = Math.floor(Math.random()*11);
var B = Math.floor(Math.random()*11);
var C = A +B;
var Input = document.getElementById('Input');
document.write(A + "+" + B + "=");
function Answer() {
if(Input.Input.value == C) {
alert("correct!");
window.location.reload();
} else {
alert("incorrect!");
document.getElementById('txtField').value='new value here'
}
}
</script>
</body>
</html>
You just need to give the txtField id to the text input here is a working fiddle http://jsfiddle.net/eFf27/
<input id="txtField" type="text" name="Input">
You forgot to add an ID to your text box.
<!doctype html>
<body>
<center>
<font size="5">
<form Id="Input">
<input id="txtField" type="text" name="Input">
<input type="button" value="submit" ID="Button">
</form>
<script type="text/javascript">
Button.addEventListener("click", Answer);
var A = Math.floor(Math.random()*11);
var B = Math.floor(Math.random()*11);
var C = A +B;
var Input = document.getElementById('Input');
document.write(A + "+" + B + "=");
function Answer()
{
if(Input.Input.value == C)
{
alert("correct!");
window.location.reload();
}
else
{
alert("incorrect!");
document.getElementById('txtField').value='new value here'
}
}
</script>
</body>
</html>