This question already has answers here:
Why does this concatenate instead of adding up
(3 answers)
Closed 8 years ago.
I am making a JavaScript code that solves the midpoint formula when you give it inputs but when it gives me the answer the numbers are not what they are supposed to be! I have checked everything and it should work fine, but it doesn't. Here is the code,please help me:
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script>
function myFunction() {
var xone = document.getElementById("x1").value;
var yone = document.getElementById("y1").value;
var xtwo = document.getElementById("x2").value;
var ytwo = document.getElementById("y2").value;
var step1 = (xone + xtwo) / 2;
var step2 = (yone + ytwo) / 2;
alert("(" + step1 + "," + step2 + ")");
}
</script>
</head>
<body>
<span>x1</span>
<input type="text" id="x1"></input><br>
<span>y1</span>
<input type="text" id="y1"></input><br>
<span>x2</span>
<input type="text" id="x2"></input><br>
<span>y2</span>
<input type="text" id="y2"></input><br>
<button onclick="myFunction()">Go</button>
</body>
</html>
here is the correction
<head>
<style>
</style>
<script>
function myFunction() {
var xone = document.getElementById("x1").value;
var yone = document.getElementById("y1").value;
var xtwo = document.getElementById("x2").value;
var ytwo = document.getElementById("y2").value;
var step1= (+xone + +xtwo)/2;
var step2= (+yone + +ytwo)/2;
alert("("+step1+","+step2+")");
}
</script>
</head>
<body>
<span>x1</span>
<input type="text" id="x1"></input><br>
<span>y1</span>
<input type="text" id="y1"></input><br>
<span>x2</span>
<input type="text" id="x2"></input><br>
<span>y2</span>
<input type="text" id="y2"></input><br>
<button onclick="myFunction()">Go</button>
</body>
You try to add the 2 number. For this you should do +var1 + +var2
Related
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 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 am attempting to build a depreciation calculator that uses user input fields to return an alert with the answer value.
If I do not use user input and simply set the variables to test values, the calculator works perfectly.
However when I request user input from the DOM the calculator only returns NaN. I tried to get the user input first with vanilla javascript and then jquery. I added console logs to try to find the problem and it showed that the variables were set to either 0 or undefined.
Can anyone here help me figure out why the user input isn't working?
// This is my attempt to get elements with JS, the only one that works is the button, I commented out the three that didn't work to attemmpt to fix with jquery
var assetValue = document.getElementById('assetValue').value;
var years = document.getElementById('years').value;
var currentYear = document.getElementById('currentYear').value;
var myBtn = document.getElementById('myBtn');
// This is my attempt with Jquery, none of it works, and I did not run it without commenting out the relevant vanilla JS
var assetValue = $("input#assetValue").val();
var years = $("input#years").val();
var currentYear = $("input#currentYear").val();
// Everything after here seems to be working fine, I used console logs to figure out where it messed up
//attach click event listener
myBtn.addEventListener('click', calc)
//The event object is then passed to this, I am assigning it the variable d
function calc(d) {
//prevent the default action - form submit / page refresh
d.preventDefault();
//Create derived variables
console.log(assetValue);
var remaining = (years - currentYear);
console.log(remaining);
var syDigits = ((years * (years + 1)) / 2);
console.log(syDigits);
var depreciation = (assetValue * (remaining / syDigits));
console.log(depreciation);
//Create Alert
alert("The depreciation in year " + currentYear + "is " + depreciation)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Depreciation Calculator</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<body>
<!-- The Form -->
<div class="container">
<form>
<div class="form-group">
<label for="exampleInputAsset">Asset Base</label> $
<input type="number" class="form-control" id="assetValue" placeholder="Enter An Integer Without Commas">
</div>
<div class="form-group">
<label for="exampleInputYears"># of Years</label>
<input type="number" class="form-control" id="years" placeholder="Enter An Integer Without Commas">
</div>
<div class="form-group">
<label for="exampleInputCurrentYear">Current Year</label>
<input type="number" class="form-control" id="currentYear" placeholder="Enter An Integer Without Commas">
</div>
<button type="submit" class="btn btn-primary" id="myBtn">Submit</button>
</form>
</div>
<script src="calculator.js"></script>
</body>
</html>
Try to convert your values to int:
From:
var assetValue = $("input#assetValue").val();
var years = $("input#years").val();
var currentYear = $("input#currentYear").val();
To:
var assetValue = parseInt($("input#assetValue").val());
var years = parseInt($("input#years").val());
var currentYear = parseInt($("input#currentYear").val());
I've made some refactoring:
use DOM instead of DOM.value
var assetValue = document.getElementById('assetValue');
var years = document.getElementById('years');
var currentYear = document.getElementById('currentYear');
var myBtn = document.getElementById('myBtn');
Parsing values using Number(<value>)
var assetValue = document.getElementById('assetValue');
var years = document.getElementById('years');
var currentYear = document.getElementById('currentYear');
var myBtn = document.getElementById('myBtn');
myBtn.addEventListener('click', calc)
function calc(event) {
event.preventDefault();
var remaining = Number(years.value) - Number(currentYear.value);
console.log(remaining);
var syDigits = (Number(years.value) * (Number(years.value) + 1)) / 2;
console.log(syDigits); // Victor's Algorithm
var depreciation = Number(assetValue.value) * (remaining / syDigits);
console.log(depreciation);
alert("The depreciation in year " + currentYear.value + " is " + depreciation)
return false;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<div class="container">
<form>
<div class="form-group">
<label for="exampleInputAsset">Asset Base</label> $
<input type="number" class="form-control" id="assetValue" placeholder="Enter An Integer Without Commas">
</div>
<div class="form-group">
<label for="exampleInputYears"># of Years</label>
<input type="number" class="form-control" id="years" placeholder="Enter An Integer Without Commas">
</div>
<div class="form-group">
<label for="exampleInputCurrentYear">Current Year</label>
<input type="number" class="form-control" id="currentYear" placeholder="Enter An Integer Without Commas">
</div>
<button type="submit" class="btn btn-primary" id="myBtn">Submit</button>
</form>
</div>
This question already has answers here:
How do I pop up an alert in JavaScript?
(9 answers)
Closed 5 years ago.
i have made a code but its shows the result in textfiled and i want it to show in
alert window {pop up window}
this is my code :
<html>
<head>
<title>Input tutorial</title>
<script language="javascript">
function addNumbers()
{
var val1 = parseInt(document.getElementById("value1").value);
var val2 = parseInt(document.getElementById("value2").value);
var ansD = document.getElementById("answer");
ansD.value = val1 + val2;
}
</script>
</head>
<body>
value1 = <input type="text" id="value1" name="value1" value="1"/>
value2 = <input type="text" id="value2" name="value2" value="2"/>
<input type="button" name="Sumbit" value="Click here" onclick="javascript:addNumbers()"/>
Answer = <input type="text" id="answer" name="answer" value=""/>
</body>
</html>
Replace
var ansD = document.getElementById("answer");
ansD.value = val1 + val2;
With
alert(val1+val2);
alert("Answer = "+ansD.value);
Replace After ansD.value = val1 + val2; line
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>