'How to calculate textarea given values in JS

I'm trying to calculate the values that are in my input boxes that's in the middle of the webpage. I thought if i add the class names references in JS within a function that i would get the results or atleast no error messages but now it says "calculate is not defined at addTotal at HTMLButtonElement.onclick"

What i am trying to do is Multiply the values by the numbers that's assigns to the boxes and then display the total below the button.

<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">
  <link rel="stylesheet" href="styles.css">
  <title>Document</title>
</head>

<body>
<div class="wrapper">
  <textarea name="Buy" id="advertise" cols="55" rows="50"></textarea>

  <div id="textFields">
    <textarea name="" class="center calculate" cols="100" rows="5"></textarea>
    <textarea name="" class="center calculate2" cols="100" rows="5"></textarea>
    <textarea name="" class="center calculate3" cols="100" rows="5"></textarea>
    <div class="buttonClass">
        <button class="addTotalButton" onclick="addTotal()">Add Total</button>
    </div>
  </div>
</div>
<script src="app.js"></script>
</body>

</html>


body {
    background-color: #434343;
  }
  
  #textFields {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
  }
  
  .center {
    display: block;
    text-align: center;
    margin-top: 100px;
  }
  
  .wrapper {
    display: flex;
    width: 100%;
    height: 100%;
  }

  /* #inputButton {
    display: flex;
    flex-direction: column;
    background-color: #011526;
    color: aliceblue;
    text-align: center;
    line-height: 30px;
    padding: 10px;
    flex-basis: 50%;
     
  } */

  .buttonClass {
      display: flex;
      justify-content: center;
      
  }

  .addTotalButton {
      margin-top: 50px;
  }

let addTotal = ()=> {
    let answerElement = document.getElementsByClassName("calculate")
     answerElement.innerHTML = parseInt(addTotal) * 20;

     let quoteElement = document.getElementsByClassName("calculate2")
           quoteElement.innerHTML = parseInt(addTotal) * 30;

           let timesElement = document.getElementsByClassName("calculate3")
                   timesElement.innerHTML = parseInt(addTotal) * 50;
                    
                   return calculate + calculate2 + calculate3;


}

javascript

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to calculate textarea given values in JS

Sources

Related Questions