NaN, when running BMI calculator - javascript

What am i doing wrong? According to the textbook example this is supposed to be sufficient code, but I get NaN when running it in a browser.
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8"/>
<html>
<head>
<title>test</title>
</head>
<body>
<p>Vekt: <input type="text" id="txtVekt" /></p>
<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>

Your values are not initialized when you first run the function
There's really no need to run the function onload, especially
since your values aren't initialized. Note that my code removes the onload invocation.
You can just run the calculation when the button is clicked. You might also want to add some validation before you run the function, but I'll leave that exercise to you.
<body>
<p>Vekt: <input type="text" id="txtVekt" /></p>
<p>Hoyde: <input type="text" id="txtHoyde" /></p>
<button id="btnBeregn" onclick="beregn();" >Beregn</button>
<p id="resultat"></p>
<script>
function beregn(){
var hoyde = document.getElementById("txtHoyde").value;
var vekt = document.getElementById("txtVekt").value;
//this assumes your inputs are valid numbers...
var bmi = vekt / (hoyde * vekt);
document.getElementById("resultat").innerHTML = "Din BMI er: " + bmi;
}
</script>
</body>

hoyde and vekt do not have any value when the page loads since the inputs are empty, so there is no reason why bmi should give you anything other than NaN.
You need to either give those inputs a default value (probably 1 to begin) and then rerun the begregn function whenever the button is clicked:
<p>Vekt: <input type="text" id="txtVekt" value=1/></p>
<p>Hoyde: <input type="text" id="txtHoyde" value=1/></p>
<button id="btnBeregn" onclick="begregn()">Beregn</button>
Or just don't run begregn on window load, but only when the button is clicked

window.onload runs... on window load. :)
Change window.onload = beregn(); to:
var btn = document.getElementById("btnBeregn");
btn.addEventListener("click", beregn);

Related

Using the onclick function for a button and the button content (words) show up but the button is not clickable. Any advice?

Just doing some practice and I cannot seem to get this button to function. I have checked multiple sites and seem to be formatting it right. Everything else in my code works properly.
Here is the code:
<html>
<head>
<title>This is a picoCTF JS Example</title>
<script>
function myFunctionSum(){
var number1 = document.getElementById("number1").value;
var number2 = document.getElementById("number2").value
car result = number(number1) + Number(number2);
alert(result);
}
</script>
</head>
<body>
<h1>JavaScript example to add2 numbers</h1>
Input the first number<br>
<input type="text" id="number1" ><br>
Input the second number<br>
<input type="text" id="number2"
<button onclick="myFunctionSum()"> Show alert! </button>
</body>
</html>
It is the button portion that seems to not be working. Appreciate all the help.
car result = number(number1) + Number(number2);
its wrong
try this
var result= +number1 + +number2 ;

Why the button object can not use the onclick() function?

I am trying to use javascript to create a web calculator. I hope that users can calculate the result when they click the different buttons. However, there is an error in line16(Uncaught TypeError: Cannot read property 'onclick' of null). I hope someone could help me. These are my codes:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
<script type="text/javascript">
var btnadd,btnsub,btnmul,btndiv;
btnadd = document.getElementById('btnadd');
btnsub = document.getElementById('btnsub');
btnmul = document.getElementById('btnmul');
btndiv = document.getElementById('btndiv');
btnadd.onclick() = function(){
cal(add());
}
function cal(func){
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
parseFloat(num1);
parseFloat(num2);
var result;
result = func(num1,num2);
document.getElementById('result').value = result;
}
function add(num1,num2){
return (num1+num2);
}
function sub(num1,num2){
return (num1-num2);
}
function mul(num1,num2){
return (num1*num2);
}
function div(num1,num2){
return (num1/num2);
}
</script>
</head>
<body>
<form>
num1:<input type="text" id="num1" /><br>
num2:<input type="text" id="num2" /><br>
<input type="button" id="btnadd" value="add" />
<input type="button" id="btnsub" value="sub" />
<input type="button" id="btnmul" value="mul" />
<input type="button" id="btndiv" value="div" /><br>
result:<input type="text" id="result"/>
</form>
</body>
</html>
You need to either add the defer attribute to your script or put it at the end of the body.
Putting JS code in the head means that it will be run before the page is fully parsed. That means that there is no element with the id of btnadd just yet. If you add the defer attribute, then it will wait for the page to be parsed before running the script. Putting at the end of the body has the same effect.
In terms of your code itself, you need to set the onclick property. You cannot assign a function like that. Also, do val2 = parseFloat(val2) rather than parseFloat(val2). (similarly for val1) because here you need to reassign the value
Because you didn't define the onclick correctly
Instead of
btnadd.onclick() = function(){
cal(add());
}
try
btnadd.onclick = function(){
cal(add);
}
Check this codepen : https://codepen.io/zecka/pen/NWrejxO
Note that there are other errors in your code that will prevent you from making it work as you want.

HTML form calculation system

I know that this might be simple, but I was trying to create some sort of system in HTML using Javascript, that when you input a number in the input tag it multiplies it with another number, them outputs the number in another input tag. But for some strange reason, I can't really find out how to do it
<!DOCTYPE html>
<html>
<head>
<script>
var test = document.getElementById('input');
function myFunction() {
document.getElementById('output').value = test + 20;
}
</script>
</head>
<body>
Input: <input id="input">
<button onclick="myFunction()">Submit</button>
<br><br>
<input id="output" type="text">
</body>
</html>
Btw, I don't know how to use JQuery or those types of things, so could you write it in simple HTML?
You should set the value property of an input rather than innerHTML:
Also use parseInt so that you can sum the numbers as input.value will be a string.
function myFunction() {
document.getElementById('output').value = parseInt(test.value, 10) + 20;
}
Here is a working demo: https://jsfiddle.net/usmanmunir/1uv9cqys/8/
function myFunction() {
var test = document.getElementById('input').value;
document.getElementById('output').value = parseInt(test) * 20;
}
Input: <input id="input" type="number">
<button onclick="myFunction()">Submit</button>
<br><br>
Final : <input id="output" type="text">

I'm unsure as to why my onclick button doesn't link up with what I type into my textbox?

So I am fairly new to Javascript, and I am working on some code that converts decimal numbers to binary numbers. However when I run this program, I can't seem to get the output I am looking for. The best I have done was get my function to output an exact number already inside of the function, when I am instead trying to get an output that is generated from any number typed into the textbox? I'm not entirely sure where I am going wrong with this. I feel like there is something I am clearly missing, but I can't seem to grasp exactly what it is. I've been using codecademy and w3schools to gain more knowledge of JavaScript, but if anyone has any other resources that helped them when they first started programming that would be great!
<!DOCTYPE html>
<html>
<body>
<p>Convert from Decimal to Binary:</p>
<form method = "post">
<p id = "demo">
<label for="decNum"></label>
<input name="decNum" type="text">
<button onclick="toBinary()">Enter</button>
</p>
</form>
<script>
function toBinary() {
document.getElementById("demo").innerHTML =
parseInt(num,10).toString(2);
}
</script>
</body>
</html>
It's because num doesn't have a value.
Try this:
<p>Convert from Decimal to Binary:</p>
<form method = "post">
<p id = "demo">
<label for="decNum"></label>
<input name="decNum" type="text" id="decNum">
<button onclick="toBinary()">Enter</button>
</p>
</form>
<script>
function toBinary() {
var num = document.getElementById("decNum").value;
document.getElementById("demo").innerHTML =
parseInt(num, 10).toString(2);
}
</script>
There are a few things I would change. First off, I would keep non form elements outside of the form. The major issue is that num doesn't have a value, but to ensure it works you will also want to take the event and use event.preventDefault() to make sure it doesn't submit the form. Try:
<!DOCTYPE html>
<html>
<body>
<p>Convert from Decimal to Binary:</p>
<form method="post">
<label for="decNum"></label>
<input id="field" name="decNum" type="text">
<button onclick="toBinary(event)">Enter</button>
</form>
<p id="demo"></p>
<script>
function toBinary(event) {
event.preventDefault();
var value = document.getElementById('field').value;
document.getElementById("demo").innerHTML =
parseInt(Number(value), 10).toString(2);
}
</script>
</body>
</html>
You're not defining num.
Grab it from the input as such:
function toBinary() {
const num = document.getElementById("textInput").value;
document.getElementById("demo").innerHTML = parseInt(Number(num),10).toString(2);
}
<p id = "demo"></p>
<label for="decNum"></label>
<input name="decNum" type="text" id="textInput">
<button onclick="toBinary()">Enter</button>

Javascript, div on click multiple numbers in input field

I'm trying to create a JavaScript to modify the number in my input field.
Example:
<input value="0">
And then a simple button or div with a JavasSript click function.
<button>Add +10</button>
After clicking on the button:
<input value="10">
Does someone have a place I can read and learn to create this, or any tips to get me started. I know very little JavaScript, but I wish to learn.
Try this or fiddleLink.
ParseInt helps in converting the string value to numbers and add them instead of concatenating. Let me know if you still have some trouble.
var tag1Elem = document.getElementById("tag1");
// The callback function to increse the value.
function clickFN() {
tag1Elem.value = parseInt(tag1Elem.value, 10) + 10;
}
// Reset the value back to 0
function resetFN() {
tag1Elem.value = 0;
}
// Callbacks can be attached dynamically using addEventListener
document.getElementById("btn").addEventListener("click", clickFN);
document.getElementById("reset").addEventListener("click", resetFN);
#wrapper {
margin: 20px;
}
<p>This is a basic tag input:
<input id="tag1" value="0" />
<button type="button" id="btn">Add +10</button>
<button type="button" id="reset">Reset</button>
</p>
You can try this
<input value="0" id="id">
give a id to input field
on button click call a function
<button onclick="myFunction()">Add +10</button>
<script>
function myFunction() {
document.getElementById("id").value = parseInt(document.getElementById("id").value) +10;
}
</script>
You can use a click counter like this
and edit it replacing += 1 with += 10.
Here my code,
var input = document.getElementById("valor"),
button = document.getElementById("buttonvalue");
var clicks = 0;
button.addEventListener("click", function()
{
clicks += 10;
input.value = clicks;
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Script</title>
</head>
<body>
<input id="valor" value="0">
<button id="buttonvalue">10</button>
</body>
</html>

Categories

Resources