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>
Related
Why this code won't run, what is wrong with it? When I try to run it, it just gives me a black page, I've ran it through a HTML validator and it says it's all good. If someone can help me I'd be very grateful.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Area of circle </title>
</head>
<body>
<script type="text/javascript">
function CalculateArea(){
var r = document.getElementById('form1').value;
let p = document.getElementById('area')
var area = (r * r * Math.PI);
if (r%1 !=0 || r < 1) p.innerHTML = 'Please enter a whole number greater than 0';
else p.innerHTML = area;
}
<form id='form1'>
Type radient of circle:
<input type="text" name="txtr" size=10>
<br>
<input type="button" value="Calculate" onClick='CalculateArea()'>
<p id='area'></p>
</form>
</script>
</body>
</html>
new answer
so in the r variables is not more selecting the whole form
but the only input you need (in the html I assigned a new id for the input)
infact in js now is selecting the input, and getting the .value directly from there :)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Area of circle </title>
</head>
<body>
<form id="form1">
Type radient of circle:
<input type="text" name="txtr" id="r-input" value="10">
<br>
<input type="button" value="Calculate" onclick="CalculateArea()">
<p id="area">
</p>
</form>
<script type="text/javascript ">
function CalculateArea() {
var r = document.getElementById('r-input').value;
let p = document.getElementById('area');
var area = (r * r * Math.PI);
if (r % 1 != 0 || r < 1) {
p.innerHTML = 'Please enter a whole number greater than 0';
console.log("r " + r);
console.log("area " + area);
} else {
p.innerHTML = area;
}
}
</script>
</body>
</html>
previous answer
sometimes the ide beautify the code wrong,
not because you write wrong,
but because you insert html code in javascript... so technically the ide think that you writing js... (that the result)
no problem, here the solution
copy the <form> code
<form>
...
</form>
CRTL X for copy it
put in the start with CTRL C ( outside of <script> tag)
try to delete the spaces between the name of the tag and the < or >
here the code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Area of circle </title>
</head>
<body>
<form id='form1'>
Type radient of circle:
<input type="text" name="txtr" size=1 0>
<br>
<input type="button" value="Calculate" onClick='CalculateArea()'>
<p id='area'>
</p>
</form>
<script type="text/javascript">
function CalculateArea() {
var r = document.getElementById('form1').value;
let p = document.getElementById('area')
var area = (r * r * Math.PI);
if (r % 1 != 0 || r < 1) {
p.innerHTML = 'Please enter a whole number greater than 0';
} else {
p.innerHTML = area;
}
}
</script>
</body>
</html>
The element belongs outside the script element, in the document .
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Area of circle </title>
</head>
<body>
<form id='form1'>
Type radient of circle:
<input type="text" name="txtr" size=10>
<br>
<input type="button" value="Calculate" onClick='CalculateArea()'>
<p id='area'></p>
</form>
</body>
<script type="text/javascript">
function CalculateArea() {
var r = document.getElementById('form1').value;
let p = document.getElementById('area')
var area = (r * r * Math.PI);
if (r%1 !=0 || r < 1) p.innerHTML = 'Please enter a whole number greater than 0';
else p.innerHTML = area;
}
</script>
</html>
<!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 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>
I have this code that I'm working on, but the calculate button won't work no matter what I do. I want to find the cost per square inch using the pizzaSize and pizzaCost. How can I make the calculate button actually calculate?
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' >
<title> Pizza Calculator </title>
<script src="pizzaCalc.js">
</script>
</head>
<body>
<h1>Pizza Calculator</h1>
<p>
<label for="priceBox">Cost: </label><input type="text" id="priceBox" size="5"/></p>
<p>
<label for="sizeBox">Diameter :</label><input type="text" id="sizeBox"
size="5"/>
</p>
<input type="button" id="cpsi" value="Cost PSI" onclick="calculate(cpsi)">
</body>
</html>
"use strict"
function pizzaCalc () {
var size = document.getElementById ("sizeBox").value;
size = parseFloat (size);
var price = document.getElementById("priceBox").value;
price = parceFloat (price);
var costPerSquareInch = price / (3.14 * (size / 2)^2)
alert('Pizza value :' +costPerSquareInch);
document.getElementById("cpsi").value = costPerSquareInch;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' >
<title> Pizza Calculator </title>
<script src="pizzaCalc.js">
</script>
</head>
<body>
<h1>Pizza Calculator</h1>
<p>
<label for="priceBox">Cost: </label><input type="text" id="priceBox" value="5"/></p>
<p>
<label for="sizeBox">Diameter :</label><input type="text" id="sizeBox" value="5"/>
</p>
<input type="button" id="cpsi" value="Cost PSI" onclick="pizzaCalc()">
<script type="text/javascript">
"use strict"
function pizzaCalc () {
var size = document.getElementById ("sizeBox").value;
size = parseFloat (size);
var price = document.getElementById("priceBox").value;
price = parseFloat (price);
var costPerSquareInch = price / (3.14 * (size / 2)^2)
alert('Pizza value :' +costPerSquareInch);
document.getElementById("cpsi").value = costPerSquareInch;
}
</script>
</body>
</html>
It appears that
<input type="button" id="cpsi" value="Cost PSI" onclick="calculate(cpsi)">
should be
<input type="button" id="cpsi" value="Cost PSI" onclick="pizzaCalc()">
also I am assuming size should be value on the input tags.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' >
<title> Pizza Calculator </title>
<script src="pizzaCalc.js">
</script>
</head>
<body>
<h1>Pizza Calculator</h1>
<p>
<label for="priceBox">Cost: </label><input type="text" id="priceBox" value="5"/></p>
<p>
<label for="sizeBox">Diameter :</label><input type="text" id="sizeBox" value="5"/>
</p>
<input type="button" id="cpsi" value="Cost PSI" onclick="pizzaCalc()">
<script type="text/javascript">
"use strict"
function pizzaCalc () {
var size = document.getElementById ("sizeBox").value;
size = parseFloat (size);
var price = document.getElementById("priceBox").value;
price = parseFloat (price);
var costPerSquareInch = price / (3.14 * (size / 2)^2)
alert('Pizza value :' +costPerSquareInch);
document.getElementById("cpsi").value = costPerSquareInch;
<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>