Uncaught ReferenceError trapArea/Per is not defined - javascript

We've recently started doing Javascript in my HTML class, and I seem to be running into a problem in all of my programs that I can't quite pick out. I would ask the teacher, but I've been working at home and we're on break and this is just going to eat at me the whole time. I've looked at other answers to "function not defined" questions, and they haven't been doing it for me. So what is it that I've consistently been doing wrong? I'm willing to bet that something's amiss with my formatting.
<!DOCTYPE html>
<html>
<head><title>Area and Perimeter of a trapezoid</title></head>
<center><body>
<h1>Area and Perimeter of a Trapezoid</h1>
<p>Enter the first base length:
<input id="b1" type="text"> </br>
Enter the second base length:
<input id="b2" type="text"> </br>
Enter the height of the trapezoid:
<input id="height" type="text"> </br>
Enter the length of the sides of the trapezoid:
<input id="side" type="text"> </br>
</p>
<button type="button" onclick="trapArea()">Area</button>
<p id="area"></p>
<button type="button" onclick="trapPer()">Perimeter</button>
<p id="perimeter"></p>
<script>
function trapArea()
{
var b1=document.getElementById("b1");
var b2=document.getElementById("b2");
var height=document.getElementById("height");
var area=(.5*(b1+b2)*height);
document.getElementById("area").innerHTML="The area of this trapezoid is "+area+".</br>".
}
function trapPer()
{
var b1=document.getElementById("b1");
var b2=document.getElementById("b2");
var side=document.getElementById("side");
var perimeter=(b1+b2+side);
document.getElementById("perimeter").innerHTML="The perimeter of this trapezoid is "+perimeter+".</br>".
}
</script>
</center>
</body>
</html>

you are using your dom elements (htmlObjects) instead of their values (text, that in this case can be parsed as number). Try this
function trapArea()
{
var b1=document.getElementById("b1").value;
var b2=document.getElementById("b2").value;
var height=document.getElementById("height").value;
console.log(b1,b2,height);
var area=(.5*(b1+b2)*height);
document.getElementById("area").innerHTML="The area of this trapezoid is "+area+".</br>";
}

Replace the last periods of
document.getElementById("area").innerHTML="The area of this trapezoid is "+area+".</br>".
and
document.getElementById("perimeter").innerHTML="The perimeter of this trapezoid is "+perimeter+".</br>".
with a semicolon ;

Related

How to print the values in the same input text field using JS

I have created 5 input text boxes using HTML and made a button while clicking the button the values will print the result input text box. The first 4 fields are my inputs and the last text field is my output. unable to debug the issue. kindly find the code and help to find the issue.
function JS(){
var h=document.getElementById('h').value;
var w=document.getElementById('w').value;
var g=document.getElementById('g').value;
var t=document.getElementById('t').value;
var total =(h+w+g+t);
document.getElementById('result').innerHTML=total;
}
<h2> Calculator</h2>
<input type="text" placeholder="value1" id="h">
<input type="text" placeholder="value2"id="w">
<input type="text" placeholder="value3" id="g">
<input type="text" placeholder="value4" id="t">
<input type="text" placeholder="result" id="result">
<!--
<p
id="result">
</p>
-->
<button id="btn" onClick="JS()">Calculate</button>
There are two keys to resolving your issue:
Coerce your inputs to numbers, which I'm doing by adding a + in front of the value assignments. If you don't do this, your values may be treated like strings and concatenated rather than added like numbers.
Set the value of the input element, not the innerHTML. If you'd rather use a <p> element, which it appears you commented out in your sample code (and which I restored for completeness of my answer), consider using innerText.
See example here:
function JS() {
var h = +document.getElementById('h').value;
var w = +document.getElementById('w').value;
var g = +document.getElementById('g').value;
var t = +document.getElementById('t').value;
let p_result = document.getElementById('p_result');
var total = (h + w + g + t);
document.getElementById('result').value = total;
p_result.innerText = total;
}
<h2> Calculator</h2>
<input type="text" placeholder="value1" id="h">
<input type="text" placeholder="value2" id="w">
<input type="text" placeholder="value3" id="g">
<input type="text" placeholder="value4" id="t">
<input type="text" placeholder="result" id="result">
<br>
<p id="p_result" style="color:red;"></p>
<br>
<button id="btn" onClick="JS()">Calculate</button>
function JS(){
var h=document.getElementById('h').value;
var w=document.getElementById('w').value;
var g=document.getElementById('g').value;
var t=document.getElementById('t').value;
var total =(Number(h)+Number(w)+Number(g)+Number(t));
document.getElementById('result').value =total;
}
.value instead of .innerHTML
also, you should convert inputs values to number cause instead of making the sum will be as consider them string( for example if you type 1 , 2 , 3 , 4 without converting to number will be 1234 if you convert to number will be 10

Displaying Complex Numbers as an Answer

I appreciate any help. I am writing this as a project I have in Pre-Cal. I am tasked with writing a webpage, based in notepad that will run the quadratic equation with the user inputting the variables. I have never written code before so while this is probably simplistic, it has taken me 3 weeks. The issue is correctly displaying complex number answers. I tried linking to "math.js" at the top but it had no effect. Here is what I am working with (I took off the explanations and bells and whistles) :
<html>
<head>
<script src="https://unpkg.com/mathjs#6.6.4/dist/math.js type="text/javascript"></script>
</head>
<body>
<label> Enter Variable "a"</label> <br>
<input type="text" id="a"> <br>
<label> Enter Variable "b"</label> <br>
<input type="text" id="b"> <br>
<label> Enter Variable "c"</label> <br>
<input type="text" id="c"> <br>
<input type="button" value="Solve" onclick="quad()"><br>
The Discriminant is:
<div id="dis"></div>
The 1st Root (also called zero) is:
<div id="res"></div>
The 2nd Root (also called zero) is:
<div id="res2"></div>
*Note that if the answers are not real numbers (a negative discriminant) the answer will read "NaN"*
<script>
function quad() {
var a = document.getElementById("a").value;
var b = document.getElementById("b").value;
var c = document.getElementById("c").value;
var Discriminant = (b*b-4*a*c);
var sroot = Math.sqrt(Discriminant);
var denominator =2*a;
var solution1 =(-b-sroot)/denominator;
var solution2 =(-b+sroot)/denominator;
document.getElementById("dis").innerHTML = Discriminant;
document.getElementById("res").innerHTML = solution1;
document.getElementById("res2").innerHTML = solution2;
}
</script>
</body>
</html>

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>

multiply 2 matrices from form inputs. (Javascript)

I got an assignment to multiply 2 matrices that the user inputs in the form text box like so:
[[1,2,3],[4,5,6],[7,8,9]]
So I created a var matrix1 and matrix2 that take the string values with a command document.getElementById("matrixID").value, but I don't know how to separate them in their own values, creating an array or a matrix of a variable (setting 1,2,3... as separate matrix/array values).
I'm not allowed to use JQuery (even though I don't think it's needed anyway). The current code looks like so:
<!DOCTYPE html>
<html>
<head>
<title>Matrix multiply</title>
<script type="text/javascript">
function calc(){
var matrix1string = document.getElementById("m1").value;
var matrix2string = document.getElementById("m2").value;
}
</script>
</head>
<body>
<form>
Matrix 1: <input type="text" id="m1" name="mat1" style="width: 500px"><br>
Matrix 2: <input type="text" id="m2" name="mat2" style="width: 500px"><br>
<input type="button" value="Calculate" onclick="calc();"><br><br>
-Result: <input type="text" id="rez" name="mat2" style="width: 500px" readonly>
</form>
</body>
</html>
You can do this:
var matrix1 = JSON.parse(matrix1string);
var matrix2 = JSON.parse(matrix2string);

User Input with document.getElementById from an input box

I am working on making a simple interest calculator but I keep getting Not a Number:
<script type="text/javascript">
function intcal() {
var pr=document.getElementById("P");
var ra=document.getElementById("r");
var ti=document.getElementById("t");
var interest=pr*ra*ti;
document.write(interest);
}
</script>
<h1> Principal </h1>
<Input type="number" id="P" name="Principal" Size="16">
<h1> Rate </h1>
<Input type="number" id="r"name="Rate" Size="16">
<h1> Time </h1>
<Input type="number" id="t" name="Time" Size="16">
<input type="button" onClick=intcal() value="Calculate">
A few problems there. getElementById returns a DOM element. You need to grab the value of the element, which is a string, and then convert it to a number (or cast it):
var pr = +document.getElementById("P").value;
var ra = +document.getElementById("r").value;
var ti = +document.getElementById("t").value;
+ casts the string to a number. Now your multiplication should work.
Also you forgot your quotes around the function call on the onclick event. Oh and read on why document.write is bad practice.
Edit: As Bergi said, multiplication casts a number as well, but in any case since you have variables, you probably want numbers assigned to them.

Categories

Resources