I enter 2 x and z coordinates. And the response should display 2 responses.
1 answer — Sum to the number 600. 2 answer - Difference from the number 600.
I have only entered one response, and then to the second script, not the first.
https://www.w3schools.com/code/tryit.asp?filename=GMFS5UGR7FWC
<!DOCTYPE html>
<html>
<body>
<script>
var x, y, c;
var outputText;
function validate() {
// get the input
x = document.forms["input_form"]["aterm1"].value;
y = document.forms["input_form"]["aterm2"].value;
// validate a, b and c
if (x == 0) {} else {
// calculate
var a1 = x;
var a2 = y;
var a3 = 600;
var a4 = (a1 +++ a3);
var a5 = (a2 +++ a3);
outputText = "<h>" + a4 + ", " + a5 + "</h> ";
}
// output the result (or errors)
document.getElementById("1").innerHTML = outputText;
}
</script>
<script>
var x, y, c;
var outputText;
function validate() {
// get the input
x = document.forms["input_form"]["aterm1"].value;
y = document.forms["input_form"]["aterm2"].value;
// validate a, b and c
if (x == 0) {} else {
// calculate
var a1 = x;
var a2 = y;
var a3 = 600;
var a4 = (a1 --- a3);
var a5 = (a2 --- a3);
outputText = "<h>" + a4 + ", " + a5 + "</h> ";
}
// output the result (or errors)
document.getElementById("2").innerHTML = outputText;
}
</script>
<h type="x">X</h>
<h type="z">Z</h>
<form name="input_form" action="javascript:validate();">
<input type="text1" name="aterm1" size="5" required>
<input type="text2" name="aterm2" size="5" required>
<input type="submit" value="Готово">
</form>
<p type="ygol1" id="1">Первый угол</p>
<p type="ygol2" id="2">Второй угол</p>
</div>
</body>
</html>
You can't have two functions with the same name. The second one will overwrite the first one. If you need to perform two calculations, use two functions and perhaps a parent function to call them both.
function validate() {
sum();
difference();
}
function sum() {
// calculate the sum
}
function difference() {
// calculate the difference
}
and then in your form you call validate() which is a weird name by the way, for a function that doesn't validate anything. Use good names for your functions so they do what they say, it makes your code easy to read.
<form name="input_form" action="javascript:validate();">
<!DOCTYPE html>
<html>
<body>
<h type="x">X</h>
<h type="z">Z</h>
<form name="input_form" action="javascript:validate();">
<input type="text1" name="aterm1" size="5" required>
<input type="text2" name="aterm2" size="5" required>
<input type="submit" value="Готово">
</form>
<p type="ygol1" id="1">Первый угол</p>
<p type="ygol2" id="2">Второй угол</p>
<script>
function validate() {
// get the input
var x = document.forms["input_form"]["aterm1"].value;
var y = document.forms["input_form"]["aterm2"].value;
// output the result (or errors)
document.getElementById("1").innerHTML = "<h>" + (x + 600) + ", " + (y + 600) + "</h>";
document.getElementById("2").innerHTML = "<h>" + (x - 600) + ", " + (y - 600) + "</h>";
}
</script>
</body>
</html>
https://www.w3schools.com/code/tryit.asp?filename=GMFZ3DNB6ELT
Related
I am stuck here with duch issue. There are 2 two entry boxes are for an amount and an interest rate (%).
If you click on the button, the page will show an overview of the balance until the amount have to be doubled.
Taking a simple numbers forexample 10 - is amount and 4 - is 4% intereste rate. So the result have to stop on amount of 20.
document.getElementById("button").onclick = loop;
var inputB = document.getElementById("inputB");
var inputC = document.getElementById("inputC");
var result = document.getElementById("result")
function loop() {
var s = inputB.value;
var r = inputC.value;
var doubleS = s * 2;
for (var i = 1; i <= doubleS; i++) {
s = ((r / 100 + 1) * s);
result.innerHTML += s + "<br>";
}
}
<! DOCTYPE html>
<html>
<body>
<br>
<input type="text" id="inputB" value="10"><br>
<input type="text" id="inputC" value="4"><br><br>
<button id="button">Klik</button>
<p> De ingevoerde resultaten: </p>
<p id="result"></p>
<script async src="oefin1.js"></script>
</body>
</html>
The issue is with your for loop bounds.
This will loop doubleX number of times: for (var i = 0; i < doubleX; i++)
This will loop until x surpasses doubleX: for (;x < doubleX;), which btw is better written with a while loop: while (x < doubleX)
document.getElementById("button").onclick = loop;
var inputB = document.getElementById("inputB");
var inputC = document.getElementById("inputC");
var result = document.getElementById("result")
function loop() {
var s = inputB.value;
var r = inputC.value;
var doubleS = s * 2;
result.innerHTML = '';
while (s < doubleS) {
s = ((r / 100 + 1) * s);
result.innerHTML += s + "<br>";
}
}
<input type="text" id="inputB" value="10"><br>
<input type="text" id="inputC" value="4"><br><br>
<button id="button">Klik</button>
<p> De ingevoerde resultaten: </p>
<p id="result"></p>
Easiest way is to just use a for loop without the convoluted math with s in the middle:
function loop() {
var s = inputB.value;
var r = inputC.value;
var doubleS = s * 2;
for (var i = s; i <= doubleS; i *= ((r / 100) + 1)) {
result.innerHTML += i + "<br>";
}
}
use a while loop and check is the value of s is bigger than or equal to doubleS
document.getElementById("button").onclick = loop;
var inputB = document.getElementById("inputB");
var inputC = document.getElementById("inputC");
var result = document.getElementById("result")
function loop() {
var s = inputB.value;
var r = inputC.value;
var doubleS = s * 2;
while(true) {
s = ((r / 100 + 1) * s);
result.innerHTML += s + "<br>";
if(s >= doubleS){
break
}
}
}
<! DOCTYPE html>
<html>
<body>
<br>
<input type="text" id="inputB" value="10"><br>
<input type="text" id="inputC" value="4"><br><br>
<button id="button">Klik</button>
<p> De ingevoerde resultaten: </p>
<p id="result"></p>
<script async src="oefin1.js"></script>
</body>
</html>
I tried changing the value into an integer with parseInt it still didn't work and whenever I run it it always just says NaN.
I tried changing the variables a1, b1 and c1 to number directly by (writing a1 = 3 for example) and it worked fine then. I'm still a novice and I don't know what to do.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<h1> Find c or know if it's a right-angle triangle?</h1>
<div id="isIt">
<h5>Please enter the lengths of each side.</h5>
//input area where you enter the sides of the triangle
<input id="a" type="number" min="0.1" placeholder="a">
<input id="b" type="number" min="0.1" placeholder="b">
<input id="c" type="number" min="0.1" placeholder="c">
<br>
<button onclick="isIt()">is it a Triangle?</button>
<button onclick="findc()">What is c?</button>
</div>
<p id="answer"></p>
<script>
//where my problem is
var a1 = (document.getElementById('a').value;
var b1 = document.getElementById('b').value;
var c1 = document.getElementById('c').value;
var m = Math.sqrt( a1*a1 + b1*b1);
//function to know if its a triangle
function isIt() {
if (c1 === m) {
document.getElementById('answer').innerHTML = 'YES!';
}else{
var trueC0 = Math.sqrt((a*a) + (b*b));
var trueC2 = trueC0.toString();
document.getElementById('answer').innerHTML = "NO! c needs to be " + trueC2 + " too be a
right-angle triangle";
}
}
//function to calculate c
function findc() {
var c = Math.sqrt( a*a + b*b);
document.getElementById('answer').innerHTML = c.toString() ;
}
</script>
</body>
</html>
There are some issues with this code. First is that you're declaring var a1 b1 c1 and m outside your isIt function. So those variables are created and initialized only when your code loads and not in every call to isIt. That means that when you call isIt those variables aren't updated with the new values on the inputs and the calculations are made with whatever value they had on page load. Second is that here var trueC0 = Math.sqrt((a*a) + (b*b)) and here var c = Math.sqrt( a*a + b*b); you're using var a and b which doesn't exist. That's the reason why it returns Nan. I believe they should be a1 and b1. Here is the working code:
<script>
//function to know if its a triangle
function isIt() {
var a1 = document.getElementById('a').value;
var b1 = document.getElementById('b').value;
var c1 = document.getElementById('c').value;
var m = Math.sqrt(a1 * a1 + b1 * b1);
if (c1 === m) {
document.getElementById('answer').innerHTML = 'YES!';
} else {
var trueC0 = Math.sqrt((a1 * a1) + (b1 * b1));
var trueC2 = trueC0.toString();
document.getElementById('answer').innerHTML = "NO! c needs to be " + trueC2 + " too be a right-angle triangle";
}
}
//function to calculate c
function findc() {
var a1 = document.getElementById('a').value;
var b1 = document.getElementById('b').value;
var c1 = document.getElementById('c').value;
var m = Math.sqrt(a1 * a1 + b1 * b1);
var c = Math.sqrt(a1 * a1 + b1 * b1);
document.getElementById('answer').innerHTML = c.toString();
}
</script>
Also note that here if (c1 === m) c1 and m can be floating numbers and Javascript has issues with floating numbers comparison. It is very common that it returns false even when the numbers are equal. There are libraries for doing that.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<h1> Find c or know if it's a right-angle triangle?</h1>
<div id="isIt">
<h5>Please enter the lengths of each side.</h5>
//input area where you enter the sides of the triangle
<input id="a" type="number" min="0.1" placeholder="a">
<input id="b" type="number" min="0.1" placeholder="b">
<input id="c" type="number" min="0.1" placeholder="c">
<br>
<button onclick="isIt()">is it a Triangle?</button>
<button onclick="findc()">What is c?</button>
</div>
<p id="answer"></p>
<script>
//where my problem is
//function to know if its a triangle
function isIt() {
var a1 = document.getElementById('a').value;
var b1 = document.getElementById('b').value;
var c1 = document.getElementById('c').value;
var m = Math.sqrt( a1*a1 + b1*b1);
if (c1 == m) {
document.getElementById('answer').innerHTML = 'YES!';
}else{
document.getElementById('answer').innerHTML = "NO! c needs to be " + m + " too be a right-angle triangle"
}
}
//function to calculate c
function findc() {
var a1 = document.getElementById('a').value;
var b1 = document.getElementById('b').value;
var c = Math.sqrt( a1*a1 + b1*b1);
document.getElementById('answer').innerHTML = c;
}
</script>
</body>
</html>
When the script loads, your a1,b1,c1 and m initialized, but at that time, user haven't entered any value, so all of them are undefined. When function isIt and findC execute, they are using undefined values for calculation. That's why your code doesn't work. Also m is a number, but c1 is string, you will need == to compare them, or you need to cast c1 to number if you want to use === for comparing them.
Hope it helps
this is my html input field
<input type="number" id="t1">
<br />
<button type="button" onclick="getvalue()">calculate</button>
<br />
<div id="l1">change<div>
this is my script
<script>
function getvalue() {
var l = document.getElementById('l1');
var c = document.getElementById('t1').value;
var lc = c + 200;
var tax = 2.1;
var tot = lc * tax;
l.innerHTML=tot;
}
</script>
and in text box i enter 10 so result is 441 this is the calculation 10+200 = 210
then 210*2.1 = 441
but in text box i enter 10 and click button i got 21420
the problem is var lc = c + 200; this is not calculate correct here its work 10200
and i try this method also var x = 200; var lc = c + x; this is also i got 10200 how can i fix this?
type of value in input number is string.
var val = document.getElementById('t1').value ;
console.log( typeof val ) ;
<input type="number" id="t1">
So you must convert to number like this:
var lc = Number(c) + 200 ;
//OR
var lc = parseInt(c) + 200 ;
//OR
var lc = parseFloat(c) + 200 ;
function getvalue() {
var l = document.getElementById('l1');
var c = document.getElementById('t1').value;
var lc = Number(c) + 200;
var tax = 2.1;
var tot = lc * tax;
l.innerHTML=tot;
}
<input type="number" id="t1">
<br />
<button type="button" onclick="getvalue()">calculate</button>
<br />
<div id="l1">change <div>
Even though the type of input is number, actually the value is of type string. That's why string concatenation is happening.
You can check the type of value with typeof operator.
To perform the intended arithmetic operation, you have to convert the value to number.
Please Note: It is better to use textContent instead of innerHTML when dealing with text only content.
var c = Number(document.getElementById('t1').value);
function getvalue() {
var l = document.getElementById('l1');
var c = document.getElementById('t1').value;
console.log(typeof(c)); //string
var lc = Number(c) + 200;
var tax = 2.1;
var tot = lc * tax;
l.textContent = tot;
}
<input type="number" id="t1"> <br />
<button type="button" onclick="getvalue()">calculate</button> <br />
<div id="l1">change <div>
Hey guys im trying to create a function that takes 3 arguments. The first argument is supposed to be "MULTIPLY" or "DIVIDE" in an input field, then followed by two numbers which are also in separate input fields, that should be either multipled or divided according based on the first argument. I cant figure out exactly how i'm supposed to write this down in code.
this is my code so far;
<!DOCTYPE html>
<html>
<head>
<script src="ovning3-3.js"></script>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1></h1>
<p>
</p>
<input id="first" type="text">
<input id="second" type="text">
<input id="third" type="text">
<input type="button" value="Multiply" onclick="multiply()">
<input type="button" value="Divide" onclick="divide()">
<input type="button" value="Multiply and Divide" onclick="multiplyAndDivide()">
</body>
</html>
and the java script;
function multiply() {
var x = document.getElementById("first").value;
var y = document.getElementById("second").value;
var z = document.getElementById("third").value;
var result = (x * y) * z
alert(result)
}
function divide() {
var x = document.getElementById("first").value;
var y = document.getElementById("second").value;
var z = document.getElementById("third").value;
var result = (x / y) / z
alert(result)
}
function multiplyAndDivide() {
multiply();
divide();
}
Any help out there?
You can use only one function
function multiplyOrDivide(todo){
var x = document.getElementById("first").value;
var y = document.getElementById("second").value;
var z = document.getElementById("third").value;
if(todo==0){
alert(Number(x*y*z));
}
else{
if(y!=0 || z!=0){
alert(Number(x/y)/z);
}
}
}
In onclick you can pass options as multiplyOrDivide(1)
See if this is what you want
<!DOCTYPE html>
<html>
<head>
<script>
function calculate() {
var x = document.getElementById("first").value;
var y = document.getElementById("second").value;
var d = document.getElementById("decision").value;
if (d=="*")
result = x*y;
else if(d=="/")
result = x/y;
alert(result)}
</script>
<title></title>
</head>
<body>
<h1></h1>
<select id="decision">
<option value="*">Multiply</option>
<option value="/">Divide</option>
</select><br>
<input id="first" type="text">
<input id="second" type="text"><br>
<input type="button" value="Calculate" onclick="calculate()">
</body>
</html>
Let me know if you need any further explaination
You can use select menu to choice which operation you want to perform. To use js functionality, you can take a look this:
function calculate() {
var selected_operation = document.getElementById("operation");
var operation = selected_operation.options[selected_operation.selectedIndex].value;
if (operation == 'multiply')
multiply(operation);
else if (operation == 'divide')
divide();
else if (operation == 'mulitiply_division')
multiplyAndDivide();
}
function multiply() {
var x = document.getElementById("first").value;
var y = document.getElementById("second").value;
var z = document.getElementById("third").value;
var result = (x * y) * z
alert(result);
}
function divide() {
var x = document.getElementById("first").value;
var y = document.getElementById("second").value;
var z = document.getElementById("third").value;
var result = (x / y) / z
alert(result);
}
function multiplyAndDivide() {
multiply();
divide();
}
To see the whole scenario, please visit DEMO
function mul()
{
var a = document.getElementById("v1").value;
var b = document.getElementById("v2").value;
document.getElementById("ans").innerHTML = "Multiplication is: " + a * b;
}
function div()
{
var a = document.getElementById("v1").value;
var b = document.getElementById("v2").value;
document.getElementById("ans").innerHTML = "Division is: " + a / b;
}
<!DOCTYPE html>
<html>
<head>
</head>
<style>
body{
padding-left: 80px;
}
</style>
<body>
<p id="ans"></p>
<input type="text" placeholder="Value 1" id="v1"><br><br>
<input type="text" placeholder="Value 2" id="v2"><br><br>
<input type="button" onclick="mul()" id="mul" value="Multiplication">
<input type="button" id="div" onclick="div()" value="Division">
</body>
</html>
Explanation:
document.getElementById(id).value: The value property sets or returns the value of the value attribute of a text field.
document.getElementById("result").innerHTM : The innerHTML property sets or returns the HTML content (inner HTML) of an element.
first time on the website, anyway my problem is that when I use onkeydown and then use GetChar to check if the enter key was pressed, when operAtion runs,the results of the function only shows on the screen for about a second and then goes away, if the user uses the onclick (clicks the enter button), then this problem doesnt occur. How do I get the result of operAtion to stay on the screen when onkeydown is used. The website is sqrtcalc.comze.com if you want to see what I mean
sqrtcalc
<!DOCTYPE html>
<html>
<head>
<title>Square Root Calculator</title>
<script language="javascript">
function operAtion (form){
var x = form.inputbox.value;
if (isNaN(x)){
//document.write("lawl");
var y = "Enter a number";
document.getElementById("failsafe").innerHTML = y;
document.getElementById("demo").innerHTML = "";
} else if (x < 0){
var y = "Number must be positive";
document.getElementById("failsafe").innerHTML = y;
document.getElementById("demo").innerHTML = "";
} else if (x == ""){
var y = "uhm, you didnt enter anything";
document.getElementById("failsafe").innerHTML = y;
document.getElementById("demo").innerHTML = "";
} else {
var y = Math.pow(x, 1/2)
document.getElementById("demo").innerHTML = "The square root of " + x + " is " + y;
document.getElementById("failsafe").innerHTML = "";
}
}
function GetChar (event,form){
var keyCode = event.keyCode;
if (keyCode == 13){
operAtion(form);
}
}
</script>
<p></p>
</head>
<body>
<form name="myform" action="" method="get" style = "font-size:50px"><strong>Square Root Calculator</strong></br>
</br>
<input type="text" name="inputbox" value = "" onkeydown = "GetChar(event,this.form);"> </br>
</br>
<input id="button" type="button" name="button" value=" Enter " onclick="operAtion(this.form)" >
</form>
<h1 id = "failsafe"></h1>
</br>
</br>
</br>
<h1 id = "demo"></h1>
</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
<img border="0" src="http://counter.rapidcounter.com/counter/1353157574/a"; ALIGN="middle" HSPACE="4" VSPACE="2" style = "padding-left:1400px;">
</body>
</html>
Add this code:
window.onload = function(){
document.getElementById("myform").onsubmit = function(){
return false;
}
}
And add the id attribute id="myform" to the <form> tag.
I refactored your code a little:
I removed your inline functions (inline JS isn't exactly best
practice)
I added an ID to your form so it could be referenced
I added return false; to keep the form from submitting
onsubmit handles both click and enter
Javascript
document.getElementById('myform').onsubmit = function() {
var x = this.inputbox.value;
if (isNaN(x)) {
//document.write("lawl");
var y = "Enter a number";
document.getElementById("failsafe").innerHTML = y;
document.getElementById("demo").innerHTML = "";
} else if (x < 0) {
var y = "Number must be positive";
document.getElementById("failsafe").innerHTML = y;
document.getElementById("demo").innerHTML = "";
} else if (x == "") {
var y = "uhm, you didnt enter anything";
document.getElementById("failsafe").innerHTML = y;
document.getElementById("demo").innerHTML = "";
} else {
var y = Math.pow(x, 1 / 2)
document.getElementById("demo").innerHTML = "The square root of " + x + " is " + y;
document.getElementById("failsafe").innerHTML = "";
}
return false;
}
HTML
<form name="myform" action="" method="get" style="font-size:50px" id="myform"><strong>Square Root Calculator</strong><br>
<br>
<input type="text" name="inputbox"> <br>
<br>
<input id="button" type="submit" name="button" value=" Enter ">
</form>
<h1 id="failsafe"></h1>
<h1 id="demo"></h1>
Working demo