This is my code, I have to convert 6 foot 4 inches to meter and am getting the incorrect number. Can someone help?
var INCHES_TO_CM = 2.54;
var CM_TO_METERS = 0.01;
var FEET_TO_INCHES = 12;
function start(){
convertHeightToMeters(6,4);
}
function convertHeightToMeters(feet, inches){
var meters = FEET_TO_INCHES + INCHES_TO_CM * CM_TO_METERS;
println(meters);
}
function convertHeightToMeters(feet, inches) {
return ((feet * FEET_TO_INCHES) + inches) * INCHES_TO_CM * CM_TO_METERS;
}
This is a simple way for beginners.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1 id"p1">The conversion</h1>
<script src="myjsfilename.js"></script>
</body>
</html>
The javascript
var conversion = function(foot, inch) {
var inch = inch*2.54;
var foot = foot*30.48;
var result = inch + foot;
result = result/100 + 'm;'
document.getElementById("p1").innerHTML = result;
};
conversion(6, 4);
And an example of how you can turn this into a very simple website (https://conversionfttom.000webhostapp.com/)
Related
i am trying to create a program to calculate area of a triangle using either of the formulas below
knowing base and height
Hebron"s formula
Knowing two sides and an included angle
I am to use onclick button for different functions(formulas) using prompt to input users data but the button are not triggering the prompt function
var baseValue = Number(prompt("Enter the base of the triangle: "));
var heightValue = Number(prompt("Enter the height of the triangle: "));
function formula1(basevalue, heightValue) {
// calculate the area
var areaValue1 = (baseValue * heightValue) / 2;
return("the area of the triangle is" + areaValue1);
}
var side1 = parseInt(prompt("Enter side1: "));
var side2 = parseInt(prompt("Enter side2: "));
var side3 = parseInt(prompt("Enter side3: "));
function formula2(){
//calculate the semi-parameter
var s = (side1 + side2 + side3) / 2;
//calculate the area
var areaValue2 = Math.sqrt(s * (s - side1) * (s - side2) * (s - side3));
alert("The area of the triangle is " ${areaValue2});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Area of a triangle</title>
<h1>Formulas to calculate the area of a triangle</h1>
</head>
<body>
<button id="bgnBtn" onclick="formula1()">Knowing Base and Height<br><br>
<button id="bgnBtn" onclick="formula2()">Heron's Formula</button><br><br>
<button id="bgnBtn" onclick="formula3()">Knowing two sides & an angle</button><br><br>
<script type="text/javascript" scr="Calculator.js"></script>
</body>
</html>
I hope this helps You.
function formula1() {
var base = parseInt(prompt("Please enter Base In Units"));
var height = parseInt(prompt("Please enter Height In Units"));
let area = base * height / 2;
console.log(area + ' Sq. Units');
document.getElementById('area').innerHTML = ('Area:' + area + ' Sq. Units');
}
function formula2() {
var a = parseInt(prompt("Please enter Side 'I' In Units"));
var b = parseInt(prompt("Please enter Side 'II' In Units"));
var c = parseInt(prompt("Please enter Side 'III' In Units"));
let s = (a + b + c) / 2;
let product = s * (s - a) * (s - b) * (s - c);
if (s <= a || s <= b || s <= c) {
console.log(a, b, c, s);
console.log('invalid Inputs');
return;
}
let area = Math.sqrt(product).toFixed(3);
console.log(area + ' Sq. Units');
document.getElementById('area').innerHTML = ('Area: ' + area + ' Sq. Units');
}
function formula3() {
var a = parseInt(prompt("Please enter Side 'I' In Units"));
var b = parseInt(prompt("Please enter Side 'II' In Units"));
var c = parseInt(prompt("angle made by given lines In deg:"));
c = c * Math.PI / 180;
let z = Math.sin(c);
let area = (0.5 * a * b * z).toFixed(3);
console.log(area + ' Sq. Units');
document.getElementById('area').innerHTML = ('Area: ' + area + ' Sq. Units');
}
<button id="bgnBtn" onclick="formula1()">Knowing Base and Height</button><br><br>
<button id="bgnBtn" onclick="formula2()">Heron's Formula</button><br><br>
<button id="bgnBtn" onclick="formula3()">Knowing two sides & an angle</button><br><br>
<h3 id='area'></h3>
Two problems, like a few of the comments say, the way you concatenate a string is either by "hello " + variable or `hello ${variable}` but in order to use the ${} method you have to have it inside a string declared with `` instead of "" or ''
The next problem is you want to declare the variables inside the function, rather than outside because it is a prompt. For example:
function greetUser() {
var input = prompt("Whats your name?");
alert("Hello " + input);
}
<button onclick="greetUser()"> Greeting </button>
The above works, yet the below doesn't
var input = prompt("Whats your name?");
function greetUser() {
alert("Hello " + input);
}
<button onclick="greetUser()"> Greeting </button>
The last one asks for your name at first, but when you click the button it doesn't ask you again, meaning you would have to reload the page to enter a new input.
function AreaT() {
let a = parseInt(document
.getElementById("a").value);
let b = parseInt(document
.getElementById("b").value);
let c = parseInt(document
.getElementById("c").value);
console.log(typeof(a));
let s = (a + b + c) / 2;
let area = Math.sqrt(s * ((s - a)
* (s - b) * (s - c)));
console.log(area)
document.getElementById("display").innerHTML = ( area + '\n'+ 'is the area of trianlge.' );
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Solve Area of Triangle</title>
</head>
<body>
<center>
<h1>AREA OF TRIANGLE KNOWING THREE SIDES</h1>
<hr />
<h2>Enter a number in the box .</h2>
<hr />
<br><br>
<button onclick = "AreaT();">Area of Triangle</button>
<br><br>
<label for="a">
Enter Number:
</label>
<input type="number" id="a"
placeholder="Input Value">
<br><br>
<label for="b">
Enter Number:
</label>
<input type="number" id="b"
placeholder="Input Value">
<br><br>
<label for="c">
Enter Number:
</label>
<input type="number" id="c"
placeholder="Input Value">
<br><br>
<p>
<b><span id="display"></span></b>
</p>
</center>
<Script type="text/javascript" src="Function.js"></Script>
</body>
</html>
I thought I had everything correct and I still can't seem to figure out why the function isn't working out the way it is supposed to. I have this issue where the code is having a reference error but I'm not sure how to define the function. I also put it through the W3 validator but that's not telling me anything.
<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>discount amount</title>
</head>
<body>
<script>
/* Input: purchase amount
* Processing: determine through if statements if they get a discount
* Output: final price after tax
*/
// Computes and returns a discounted purchase amount.
function getDiscountedAmount(purchase) {
var purchase =
parseInt(document.getElementById('purchase').value);
var dayOfWeek = new Date().getDay();
var output = document.querySelector("#output");
let rate;
if (purchase < 50) {
rate = 0.06;
} else if (purchase < 100 && [2, 3].includes(dayOfWeek)) {
rate = 0.06;
} else if (purchase < 500 && [2, 3].includes(dayOfWeek)) {
rate = 0.06;
}
let discount = purchase * rate;
return purchase - discount;
output.innerHTML = "$" + String(getDiscountedAmount(200));
}
</script>
Please enter your final price: <input type="text" id="purchase" size="5">
<br>
<button type="button" onclick="getDiscountedAmount(purchase)">discount?
</button>
<div id="output"></div>
</body>
</html>
The first line of your function already is wrong, you're trying to get a float number from nothing and you're overriding your input parameter to the function
var purchase = parseFloat();
Try:
purchase = parseFloat(purchase);
so that it uses your input parameter.
Also I'm not too sure about your date comparison dayOfWeek == (2, 3), I don't know if that works, I've never seen that before, I personally use [2, 3].includes(dayOfWeek)
And lastly your function returns a value but then you don't see that value anywhere, try using
console.log(getDiscountedAmount(200)) or whatever your price is
In terms of your input and output you want to use DOM manipulation to get the input and show the output.
If you want to see the value in your "output" then
var output = document.querySelector("#output");
output.innerHTML = "$" + String(getDiscountedAmount(200));
Would be a simple DOM mechanism, but it's not the cleanest
One more tip is to put your script tags lastly in the body, because you want all your HTML elements "defined" first before you try to access them
Altogether a cleaner version of your code:
<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>discount amount</title>
</head>
<body>
Please enter your final price: <input type="text" id="myInput" size="5" /><br />
<button type="button" id="myButton">discount?</button>
<div id="myOutput"></div>
<script>
var myInput = document.querySelector("#myInput");
var myOutput = document.querySelector("#myOutput");
var myButton = document.querySelector("#myButton");
myButton.onclick = function() {
// Computes and returns a discounted purchase amount.
var purchase = parseFloat(myInput.value);
var dayOfWeek = new Date().getDay();
var rate;
if (purchase < 50) {
rate = 0.06;
} else if (purchase < 100 && [2, 3].includes(dayOfWeek)) {
rate = 0.06;
} else if (purchase < 1000) {
rate = 0.025;
} else {
rate = 0.03;
}
let discount = purchase * rate;
var finalPrice = purchase - discount;
output.innerHTML = "$" + String(finalPrice);
};
</script>
</body>
</html>
I changed around some ID's and moved the onclick into your JavaScript for cleaner code overall, as we like to separate the HTML from the JS
When you load your script you get an Uncaught SyntaxError because you closed your function with two }. To fix this just delete line 31.
In your first line of the function you are using parseFloat(); wrong:
var purchase = parseFloat();
Do:
var purchase = parseFloat(purchase);
Than you need to get your input number.
getDiscountedAmount(purchase) in the onclick event doesn't work.
You can use this:
var purchase = document.getElementById("purchase").value; // get value from text field
purchase = parseFloat(purchase); // convert to float
In the end you have to do this to show the number in you output div:
let output = purchase - discount;
document.getElementById("output").innerText = output; // set discont into your output div
return output;
Here is your code and how i fixed it:
<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>discount amount</title>
<script>
/* Input: purchase amount
* Processing: determine through if statements if they get a discount
* Output: final price after tax
*/
// Computes and returns a discounted purchase amount.
function getDiscountedAmount(purchase) {
var purchase = document.getElementById("purchase").value; // get value from text field
purchase = parseFloat(purchase); // convert to float
var dayOfWeek = new Date().getDay();
var rate;
if (purchase < 50) {
rate = 0.06;
}
else if (purchase < 100 && dayOfWeek ==(2,3)) {
rate = 0.06;
}
else if (purchase < 1000) {
rate = 0.025;
}
else {
rate = 0.03;
}
let discount = purchase * rate;
let output = purchase - discount;
document.getElementById("output").innerText = output; // set discont into your output div
return output;
}
</script>
</head>
<body>
Please enter your final price: <input type="text" id="purchase" size="5"><be>
<button type="button" onclick="getDiscountedAmount()">discount?</button>
<div id="output"></div>
</body>
</html>
I didn't change your return statement and dayOfWeek because i don't know how you exactly want to use it.
Here is what you are looking for:
body{margin:0;padding:0;font-family:arial;background:rgb(30,30,30);height:100vh;width:100%}.wrapper{background:lightgrey;background:linear-gradient(318deg,rgba(217,123,123,1) 0%,rgba(135,249,255,1) 100%);width:80%;height:126px;position:relative;top:calc(50vh - 63px);left:10%;padding:3px;border-radius:12px}.content{background:rgb(80,80,80);background:rgba(0,0,0,.5);border-radius:10px;width:calc(100% - 24px);padding:12px}label{font-weight:700;color:#fff}input{width:calc(100% - 16px);margin-top:4px;padding:6px;border:2px solid #fff;border:2px solid rgba(0,0,0,.3);color:#fff;background:#fff;background:rgba(0,0,0,.5);border-radius:6px;font-size:14pt}::placeholder{color:#fff;color:rgba(255,255,255,.8)}input:focus{outline:none;border:2px solid #fff;border:3px solid rgba(0,0,0,.6);padding:5px}.output-container{display:inline-block;float:right;width:180px;padding:8px;color:#fff;background:#fff;background:rgba(0,0,0,.5);font-size:12pt;margin-top:4px;border-radius:6px;font-size:14pt}button{margin-top:4px;width:150px;border:0;border-radius:6px;padding:8px;background:gray;background:rgba(0,0,0,.6);color:#fff;font-weight:700;font-size:14pt;transition:0.25s ease}button:focus{outline:none;}button:hover{cursor:pointer;background:gray;background:rgba(0,0,0,.8)}#media only screen and (max-width:400px){.wrapper{width:calc(100% - 6px);height:auto;top:0;left:0;border-radius:0}.output-container,button{width:calc(50% - 12px)}}
<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>discount amount</title>
</head>
<body>
<div class='wrapper'>
<div class='content'>
<label>Please enter your final price:</label><input type="text" autocomplete="off" placeholder='Enter price...' id="purchase" size="5">
<button type="button" onclick="getDiscountedAmount()">See discount</button>
<div class='output-container'>Total: <span id='output'>--</span></div>
</div>
</div>
<script>
//Get the output element
outputEl = document.getElementById("output");
function getDiscountedAmount() {
//Gets the value of your input
var purchase = parseFloat((document.getElementById('purchase').value).replace(/[^\d]/g,""));
var dayOfWeek = new Date().getDay();
var rate;
if (purchase < 50) {
rate = 0.06;
} else if (purchase < 100 && [2, 3].includes(dayOfWeek)) {
rate = 0.06;
} else if (purchase < 500 && [2, 3].includes(dayOfWeek)) {
rate = 0.06;
}
else {
rate = 0.03;
}
let discount = purchase * rate;
let output = purchase - discount;
//Checks if output is a number.
if(isNaN(output)){
output = 'Not a number!';
} else{
output = '$' + output;
}
//Puts the output inside of your "output" <div>
outputEl.textContent = output;
}
</script>
</body>
</html>
I am currently working on a 1/2 pyramid of numbers. I can get the output to total up the line and get everything but the * sign between the numbers. Hoping that someone out there can lend a helping hand. Here is the code that I have completed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Assignment 1</title>
<script>
var num = "";
var match ="";
var size = prompt("Enter the size of the pyramid");
if (size >=1) {
var total="1";
for(var i=1; i<=size; i++)
{
if (i < size){
num = num + i + " "
} if (i==size) {
num =num + i }
total= total * i;
document.write(num + " = "+ total + "<br>");
}
}else {
alert("Please enter a number equal to or greater than 1");
}
var total="1";
</script>
</head>
<body>
<main>
<!-- Will show after the script has run -->
<h1>Assignment 1</h1>
</main>
</body>
</html>
-
I am looking for output like this
1=1
1*2=2
1*2*3=6
1*2*3*4=24
1*2*3*4*5=120
and so on.
Thanks again
You can use a loop like this and make the total time the new iteration value:
var total = 1;
var newList = [];
for(let i=1; i<=5; i++) {
newList.push(i);
total *= i;
console.log(newList.join('*') + '=' + total)
}
Run code snippet output:
1=1
1*2=2
1*2*3=6
1*2*3*4=24
1*2*3*4*5=120
I have a small error in this code, please help me.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" id="price">
<button onclick="calc()">GO</button>
<h1 id="show"></h1>
<script type="text/javascript">
function calc() {
"use strict";
var price = document.getElementById('price').value;
var res = (price / 100 * 5 + 20) + price;
var show = document.getElementById('show').value = Math.floor(res);
}
</script>
</body>
</html>
ex:write 100 in input the result is 10025, I need 125
It's because you try to add String to a Number. You need to convert price to a Number like this :
var price = parseFloat(document.getElementById('price').value);
// Or like this :
var price = Number(document.getElementById('price').value);
// Or like this :
var price = document.getElementById('price').value * 1;
Full example which shows decimal numbers:
var priceElement = document.getElementById('price');
var showElement = document.getElementById('show');
function calc() {
var price = parseFloat(priceElement.value, 10);
var result = (price / 100 * 5 + 20) + price;
showElement.innerHTML = result.toFixed(2);
}
<input type="text" id="price">
<button onclick="calc()">GO</button>
<h1 id="show"></h1>
Quite there.
A couple of fixes:
Store your elements outside of the function, since their ids won't change in your case:
var priceElement = document.getElementById('price');
var showElement = document.getElementById('show');
Use parseFloat(...) to parse floating point numbers stored in strings:
var price = parseFloat(priceElement.value);
To set an element's content (in your case, the content of the h1 element), use .innerHTML:
showElement.innerHTML = Math.floor(result);
var priceElement = document.getElementById('price');
var showElement = document.getElementById('show');
function calc() {
var price = parseFloat(priceElement.value);
var result = (price / 100 * 5 + 20) + price;
showElement.innerHTML = Math.floor(result);
}
<input type="text" id="price">
<button onclick="calc()">GO</button>
<h1 id="show"></h1>
Yes, the value of price is string, so convert it to number.
And I don't think your "document.getElementById('show').value" is useful.
And the variable show is not used.
And the formula for res is somewhat convoluted -- see var v1.
Maybe you will find using console.log's useful in debugging.
<html>
<body>
<input type="text" id="price">
<button onclick="calc()">GO</button>
<h1 id="show"></h1>
<script type="text/javascript">
"use strict";
function calc() {
var price = 1*document.getElementById('price').value;
console.log("price", price);
var res = (price / 100 * 5 + 20) + price;
console.log("res", res);
document.getElementById('show').innerHTML = Math.floor(res);
var v1 = price*1.05 + 20;
console.log("v1", v1);
document.getElementById('show').innerHTML += ", " + v1;
}
</script>
</body>
</html>
Im trying to scale an image using variables rather than a set in stone scale. I know using "scale(0.5,0.5)" works but I want to do something like "scale(x,y)" so the scale factor changes depending on what variables x and y are, However when I try doing this, the image will no longer scale like it did when it had a set scale factor. How can I solve this? Thanks for any help. Here's an example of what I mean.
<!DOCTYPE html>
<html>
<body>
<img id="myImg" src="img_pulpit.jpg">
<button onclick="myFunction()">Try it</button>
<script>
var a = document.getElementById("myImg");
var d = 5
var e = 10
var f = d/e
var g = 10
var h = 30
var i = g/h
function myFunction() {
document.getElementById("myImg").style.WebkitTransform = "scale(f, i)";
}
</script>
</body>
</html>
Just use string concatenation ("scale(" + f + ", " + i + ")") or string interpolation (`scale(${f}, ${i})`).
function myFunction() {
document.getElementById("myImg").style.WebkitTransform = "scale(" + f + "," + i + ")";
}
You need to use concat the value of f and i
document.getElementById("myImg").style.WebkitTransform = "scale("+f+","+i+")";
<!DOCTYPE html>
<html>
<body>
<img id="myImg" src="https://lh3.googleusercontent.com/gN6iBKP1b2GTXZZoCxhyXiYIAh8QJ_8xzlhEK6csyDadA4GdkEdIEy9Bc8s5jozt1g=w300">
<button onclick="myFunction()">Try it</button>
<script>
var a = document.getElementById("myImg");
var d = 5
var e = 10
var f = d/e
var g = 10
var h = 30
var i = g/h
function myFunction() {
document.getElementById("myImg").style.WebkitTransform = "scale("+f+","+i+")";
}
</script>
</body>
</html>