Uncaught ReferenceError trapArea/Per не определено

Мы недавно начали делать Javascript в моем классе HTML, и я, похоже, столкнулся с проблемой во всех моих программах, которую я не могу точно определить. Я бы спросила учителя, но я работала дома, и мы находимся на перерыве, и это все время будет съедать меня. Я смотрел на другие ответы на вопросы "функция не определена", и они не делали это для меня. Так что же я постоянно делаю неправильно? Я готов поспорить, что что-то не так с моим форматированием.

<!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>

2 ответа

Решение

Вы используете элементы dom (htmlObjects) вместо их значений (текст, который в этом случае может быть проанализирован как число). Попробуй это

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>";
}

Заменить последние периоды

document.getElementById("area").innerHTML="The area of this trapezoid is "+area+".</br>". 

а также

document.getElementById("perimeter").innerHTML="The perimeter of this trapezoid is         "+perimeter+".</br>".

с точкой с запятой ;

Другие вопросы по тегам