I was wondering instead of using the alert function to show the function result if there was a way to print it in a text field on the same page underneath the Calculate Button. Here is what I have so far:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="styles/formula_styles.css">
<script type="text/javascript">
var a,b,c;
function setValues1()
{
a = Number(document.getElementById("a").value);
b = Number(document.getElementById("b").value);
c = Number(document.getElementById("c").value);
}
function and()
{
setValues1();
result1 = (-b + Math.sqrt(b*b -4*a*c))/(2*a);
result2 = (-b - Math.sqrt(b*b -4*a*c))/(2*a);
alert("The volume of this cube is " +result1 + " and " +result2);
}
</script>
</head>
<body>
<nav>
Home // Grade Levels
</nav>
<div id="container">
<div id="formula">
<input type="text" id="a" placeholder="'A' Variable"/><br>
<input type="text" id="b" placeholder="'B' Variable"/><br>
<input type="text" id="c" placeholder="'C' Variable"/><br>
<input type="button" onclick="and()" value="Calculate!"/>
</div>
</div>
</body>
</html>
add an element to your html, something like this:
<div id="results"></div>
Then instead of using an alert, you can do something along the lines of this:
document.getElementById("results").innerHTML = "The volume of this cube is " +result1 + " and " +result2;
Create a div under the button and populate the innerHTML of the div:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="styles/formula_styles.css">
<script type="text/javascript">
var a, b, c;
function setValues1() {
a = Number(document.getElementById("a").value);
b = Number(document.getElementById("b").value);
c = Number(document.getElementById("c").value);
}
function and() {
setValues1();
result1 = (-b + Math.sqrt(b * b - 4 * a * c)) / (2 * a);
result2 = (-b - Math.sqrt(b * b - 4 * a * c)) / (2 * a);
document.getElementById('result').innerHTML = "The volume of this cube is " + result1 + " and " + result2;
}
</script>
</head>
<body>
<nav>
Home // Grade Levels
</nav>
<div id="container">
<div id="formula">
<input type="text" id="a" placeholder="'A' Variable" />
<br>
<input type="text" id="b" placeholder="'B' Variable" />
<br>
<input type="text" id="c" placeholder="'C' Variable" />
<br>
<input type="button" onclick="and()" value="Calculate!" />
<div id="result">
</div>
</div>
</div>
</body>
</html>
You can do this by setting up an element you wish to contain the text.
document.getElementById("result").innerHTML = "The volume of this cube is " +result1 + " and " + result2;
To do this you need set the element up with an ID of result.
This line of code is calling the function getElementByID to get the element, which then lets you change its innerHTML property.
The element you assign to this can be whatever you want it to be.
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>
The problem is solved no need to go thorough the post thanks for the help the useful time is appreciated.
you are referencing this DOM object (<span id = "res"></span>) itself but you don't want this object but the text which is stored inside.
You would get this value with a simple
document.getElementById("res").innerText
That's more or less the same call you are using to set the text of this res object.
So a working example could look like this
<!DOCTYPE html>
<html>
<head>
<title> Exercise 2 </title>
</head>
<body>
<form>
Enter the value to be converted <br><br> <input type="numbers" id="val" /> <br><br>
<input type="button" onClick="celtofar()" Value="Celcius to Fahrenhet" id="b1" /><br><br>
<input type="button" onClick="fartocel()" Value="Fahrenhet to Celcius" id="b2"/><br><br>
Output : <br>
<span id = "res"></span>
<p id= "op"></p>
</form>
<style type="text/css">
body { margin-left: 450px; margin-top: 100px}
</style>
<script type="text/javascript">
function celtofar()
{
v = document.getElementById("val").value;
document.getElementById("res").innerHTML = (v * 1.8) + 32;
var message = v +'\xB0C is ' + document.getElementById("res").innerText + '\xB0F.';
document.getElementById("op").innerHTML = message;
}
function fartocel()
{
v = document.getElementById("val").value;
document.getElementById("res").innerHTML = (v - 32) / 1.8;
var message = v +'\xB0F is ' + document.getElementById("res").innerText + '\xB0C.';
document.getElementById("op").innerHTML = message;
}
</script>
</body>
</html>
Read more about this here:
https://www.w3schools.com/js/js_htmldom.asp
you just need to close the span after the <p></p> tag. Just put the closing </span> after the </p>
<span id = "res">
<p id= "op"></p></span>
I have created an HTML form with three fields. Field A for input text, and fields B and C for number input.
I created a function to calculate B i C, and to output data from A,B and C onto the page.
How can I make it so that field A must be filled in, and fields B and C must be a positive value?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tax calculator</title>
<meta charset="UTF-8">
</head>
<body>
<div>
Field A:<input id="name" type="text">
Field B:<input id="tBas" type="value">
Field C:<input id="tRat" type="value">
<button id="calc">Calculate !</button>
</div>
<strong>
<div id="name"> </div>
<div id="income"> </div>
<div id="rate"> </div>
<div id="result"> </div>
</strong>
<script src="testCalculate.js">
</script>
</body>
</html>
JavaScript:
function calculate() {
var name = document.getElementById('name').value;
var base = parseFloat(document.getElementById('tBas').value);
var rate = document.getElementById('tRat').value;
var taxPayer = ("First and last name: ") + (name);
var taxIncome = ("Income for taxation: ") + ((base).toFixed(2));
var taxRate = ("Tax rate: ") + (rate) + ("%.");
var taxToPay = ("You need to pay: ") + ((base * rate / 100).toFixed(2));
document.getElementById('name').innerHTML = taxPayer;
document.getElementById('income').innerHTML = taxIncome;
document.getElementById('rate').innerHTML = taxRate;
document.getElementById('result').innerHTML = taxToPay;
}
document.getElementById('calc').addEventListener('click', calculate);
To check if a field is filled, you can just compare his value to "".
To check if a field has a positive value, you can use parseInt to cast your value (which is a string) into an integer and then compare it to 0 > 0.
Something like that should do the trick !
function calculate() {
var name = document.getElementById('name').value;
var base = parseFloat(document.getElementById('tBas').value);
var rate = document.getElementById('tRat').value;
if (name != "" && parseInt(base) > 0 && parseInt(rate) > 0) {
var taxPayer = ("First and last name: ")+(name);
var taxIncome = ("Income for taxation: ")+((base).toFixed(2));
var taxRate = ("Tax rate: ")+(rate)+("%.");
var taxToPay = ("You need to pay: ")+((base*rate/100).toFixed(2));
document.getElementById('name').innerHTML = taxPayer;
document.getElementById('income').innerHTML = taxIncome;
document.getElementById('rate').innerHTML = taxRate;
document.getElementById('result').innerHTML = taxToPay;
}
}
document.getElementById('calc').addEventListener('click', calculate);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tax calculator</title>
<meta charset="UTF-8">
</head>
<body>
<div>
Field A:<input id="name" type="text">
Field B:<input id="tBas" type="value">
Field C:<input id="tRat" type="value">
<button id="calc">Calculate !</button>
</div>
<strong>
<div id="name"> </div>
<div id="income"> </div>
<div id="rate"> </div>
<div id="result"> </div>
</strong>
</body>
</html>
You don't need to use JS for this trick
To have the input filled set it as
<input id="name" type="text" required>
Then to have an positive value
<input id="tBas" type="number" min=0 >
IDs should be uniq. You should use another id to you div#name.
For instance, into your html code:
<div id="div_name"> </div>
And then, into your script
document.getElementById('div_name').innerHTML= taxPayer;
I want to recognize English text from the cat image. This is my source code. The output text is as follows. How to improve the recognition rate, making the string Vou will be converted to the string You, the string advrce will be converted to string advice.
<html>
<head>
<script src="https://cdn.rawgit.com/naptha/tesseract.js/0.2.0/dist/tesseract.js">
</script>
</head>
<body>
<input type="text" id="url" placeholder="Image URL" />
<input type="button" id="go_button" value="Run" />
<div id="ocr_results"> </div>
<div id="ocr_status"> </div>
<script>
function runOCR(url) {
Tesseract.recognize(url,{lang:'eng'})
.then(function(result) {
document.getElementById("ocr_results")
.innerText = result.text;
}).progress(function(result) {
document.getElementById("ocr_status")
.innerText = result["status"] + " (" +
(result["progress"] * 100) + "%)";
});
}
document.getElementById("go_button")
.addEventListener("click", function(e) {
var url = document.getElementById("url").value;
runOCR(url);
});
</script>
</body>
</html>
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>