How to get the total of two functions results

I want to get the total of the result of the below myFunction1 and myFunction2.

For example : if I enter adults as 2 child as3 The total sould come 130.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 45%;
  padding: 15px;
  height: 170px; 
}


.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>


<font face="Cambria" size="5" >From $24.00</font>
<p>Price varies by Group size </p>
<font face="Cambria" size="5" >Select Date and Travelers</font>

<div class="row">
  <div class="column" >
 <label>Adutls</label>
 <input type="number" oninput="myFunction1()" id="adults" name="adults" min="1" max="20" style="width: 10em;" >
    <br><br>
  <label>Child</label>
  <input type="number" oninput="myFunction2()" id="child" name="child" min="1" max="4" style="width: 10em;" >
  <br><br>
    <label for="lname">Travel Date </label>
    <input type="date" id="tourDate" value="date" >
    <br><br>
    
  </div>
  <div class="column">
   
   

   <p type="number" id="demo"></p>

<script>
function myFunction1() {
  var x= document.getElementById("adults").value;
  var x;

    if (x === "1") {x = 60;} 
    else if (x === "2" ) {x = 100;}
    else if (x === "3" ) {x = 120;}
    else if (x === "4" ) {x = 140;}
    else if (x === "5" ) {x = 150;}
    else if (x === "6" ) {x = 156;}
    else if (x === "7" ) {x = 168;}
    
    x.innerText = x;
    
  document.getElementById("demo").innerHTML = x;
}
</script> 

  <p type="number" id="demo2"></p>
<script>
function myFunction2() {
  var y = document.getElementById("child").value;
  var y;

    if (y === "1") {y = 10;} 
    else if (y === "2" ) {y = 20;}
    else if (y === "3" ) {y = 30;}
    else if (y === "4" ) {y = 40;}
   
   y.innerText = y;
   
  document.getElementById("demo2").innerHTML = y;
}
</script> 


  </div>
</div>

</body>
</html>
```

Welcome, Rasika.

What I would do is put both functions in the same script tag, change their variables y so that they are different and make them global. Then, you can just sum the two together.

Hope that helps

Hi Sky020,

Thank you very much for your advice. I tried in that way. But I was unable to do so. If you can show me with the code, It will be grateful , as I am still new to coding. Thank you

@Rasika Instead of us showing you how to do it, why don’t you post your most recent attempt and let us guide you to a solution?

Hi Randell,

Yes sure, This is the way I tried get the total of myFunction and myFunction2. ( See myFunction3).But it was not successful. Please advice.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 45%;
  padding: 15px;
  height: 170px; 
}


.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>


<font face="Cambria" size="5" >From $24.00</font>
<p>Price varies by Group size </p>
<font face="Cambria" size="5" >Select Date and Travelers</font>

<div class="row">
  <div class="column" >
 <label>Adutls</label>
 <input type="number" oninput="myFunction1()" id="adults" name="adults" min="1" max="20" style="width: 10em;" >
    <br><br>
  <label>Child</label>
  <input type="number" oninput="myFunction2()" id="child" name="child" min="1" max="4" style="width: 10em;" >
  <br><br>
    <label for="lname">Travel Date </label>
    <input type="date" id="tourDate" value="date" >
    <br><br>
    
  </div>
  <div class="column">
   
   

<script>
function myFunction1() {
  var x= document.getElementById("adults").value;
  var x;

    if (x === "1") {x = 60;} 
    else if (x === "2" ) {x = 100;}
    else if (x === "3" ) {x = 120;}
    else if (x === "4" ) {x = 140;}
    else if (x === "5" ) {x = 150;}
    else if (x === "6" ) {x = 156;}
    else if (x === "7" ) {x = 168;}
    
    x.innerText = x;
    
  document.getElementById("demo").innerHTML = x;
}

  
function myFunction2() {
  var y = document.getElementById("child").value;
  var y;

    if (y === "1") {y = 10;} 
    else if (y === "2" ) {y = 20;}
    else if (y === "3" ) {y = 30;}
    else if (y === "4" ) {y = 40;}
   
   y.innerText = y;
   
  document.getElementById("demo2").innerHTML = y;
}
</script> 


   <p type="number" id="demo"></p>
   <p type="number" id="demo2"></p>


<script>
function myFunction3() {
  var a = document.getElementById("demo").value;
  var b = document.getElementById("demo2").value;
  var c = a + b;
  document.getElementById("demo").innerHTML = c;
}
</script>



  </div>
</div>

</body>
</html>

The a and b vars are strings – you need to convert them to ints to add them sensibly. So try var c = parseInt(a) + parseInt(b)

  1. You are not running the function.

  2. You can not get the numbers from the demo elements using .value, you can use .innerText or .innerHTML.

  3. The values you get from the elements are strings, not numbers so using + will do string concatenation and not addition. Convert the strings to numbers before doing the addition.

Also, you can just put it inside the same script element as the rest of the code. I’d also suggest using some more descriptive function names.

Hi Cuckadams,

Thank you for your advice. I did wat you said. But still I couldn’t get the answer.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 45%;
  padding: 15px;
  height: 170px; 
}


.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>


<font face="Cambria" size="5" >From $24.00</font>
<p>Price varies by Group size </p>
<font face="Cambria" size="5" >Select Date and Travelers</font>

<div class="row">
  <div class="column" >
 <label>Adutls</label>
 <input type="number" oninput="myFunction1()" id="adults" name="adults" min="1" max="20" style="width: 10em;" >
    <br><br>
  <label>Child</label>
  <input type="number" oninput="myFunction2()" id="child" name="child" min="1" max="4" style="width: 10em;" >
  <br><br>
    <label for="lname">Travel Date </label>
    <input type="date" id="tourDate" value="date" >
    <br><br>
    
  </div>
  <div class="column">
   
   

<script>
function myFunction1() {
  var x= document.getElementById("adults").value;
  var x;

    if (x === "1") {x = 60;} 
    else if (x === "2" ) {x = 100;}
    else if (x === "3" ) {x = 120;}
    else if (x === "4" ) {x = 140;}
    else if (x === "5" ) {x = 150;}
    else if (x === "6" ) {x = 156;}
    else if (x === "7" ) {x = 168;}
    
    x.innerText = x;
    
  document.getElementById("demo").innerHTML = x;
}

  
function myFunction2() {
  var y = document.getElementById("child").value;
  var y;

    if (y === "1") {y = 10;} 
    else if (y === "2" ) {y = 20;}
    else if (y === "3" ) {y = 30;}
    else if (y === "4" ) {y = 40;}
   
   y.innerText = y;
   
  document.getElementById("demo2").innerHTML = y;
}


</script> 


   <p type="number" id="demo"></p>
   <p type="number" id="demo2"></p>
   
  
   
<script>
function myFunction3() {
  var a = document.getElementById("demo").innerHTML;
  var b = document.getElementById("demo2").innerHTML;
  var c = parseInt(a) + parseInt(b);
  document.getElementById("demo3").innerHTML = c;
</script>
 <p type="number" id="demo3"></p>
  </div>
</div>

</body>
</html>

Your code has a number of issues:

  • You changed the declaration of a and b to use .innerHTML instead of .value. value was correct.
  • You’re not calling myfunction3 anywhere (you should give your functions more descriptive names)
  • You have unbalanced tags (the </div> after your demo3 element)
  • type=number is not a valid attribute for the p tag.

Hi chuckadams,

I made the changes acording to your adivce. Now I change the names of functions also. Now I want to get TotalValueFunction.
What is the event that I should call TotalValueFunction. I have given “onshow” ( Not working). But I think it is not supporting to Chrome.
Do you have any idea.
Here is the code now.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 45%;
  padding: 15px;
  height: 170px; 
}


.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>


<font face="Cambria" size="5" >From $24.00</font>
<p>Price varies by Group size </p>
<font face="Cambria" size="5" >Select Date and Travelers</font>

<div class="row">
  <div class="column" >
 <label>Adutls</label>
 <input type="number" oninput="AdultsValueFunction()" id="adults" name="adults" min="1" max="20" style="width: 10em;" >
    <br><br>
  <label>Child</label>
  <input type="number" oninput="ChildValueFunction()" id="child" name="child" min="1" max="4" style="width: 10em;" >
  <br><br>
    <label for="lname">Travel Date </label>
    <input type="date" id="tourDate" value="date" >
    <br><br>
    
  </div>
  <div class="column">
   
   

<script>
function AdultsValueFunction() {
  var x= document.getElementById("adults").value;
  var x;

    if (x === "1") {x = 60;} 
    else if (x === "2" ) {x = 100;}
    else if (x === "3" ) {x = 120;}
    else if (x === "4" ) {x = 140;}
    else if (x === "5" ) {x = 150;}
    else if (x === "6" ) {x = 156;}
    else if (x === "7" ) {x = 168;}
    
    x.innerText = x;
    
  document.getElementById("demo").innerHTML = x;
}

  
function ChildValueFunction() {
  var y = document.getElementById("child").value;
  var y;

    if (y === "1") {y = 10;} 
    else if (y === "2" ) {y = 20;}
    else if (y === "3" ) {y = 30;}
    else if (y === "4" ) {y = 40;}
   
   y.innerText = y;
   
  document.getElementById("demo2").innerHTML = y;
}


</script> 

   <p onchange="TotalValueFunction()" id="demo"></p>
   
   <p onchange="TotalValueFunction()" id="demo2"></p>
   
    
<script>
function TotalValueFunction() {
  var a = document.getElementById("demo").value;
  var b = document.getElementById("demo2").value;
  var c = parseInt(a) + parseInt(b);
  document.getElementById("demo3").innerHTML = c;
</script>

 <p id="demo3"></p>
  
</div>

</body>
</html>

Hello everyone,

Finally I was able to do it. Now it dispays the total. Thank you very much for all who advise me. I really appreciate all the adivces. Thank you again.
See the code now.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 45%;
  padding: 15px;
  height: 170px; 
}


.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>


<font face="Cambria" size="5" >From $24.00</font>
<p>Price varies by Group size </p>
<font face="Cambria" size="5" >Select Date and Travelers</font>

<div class="row">
  <div class="column" >
 <label>Adutls</label>
 <input type="number" oninput="ValueFunction()" id="adults" name="adults" value="0" min="1" max="20" style="width: 10em;" >
    <br><br>
  <label>Child</label>
  <input type="number" oninput="ValueFunction()" id="child" name="child" value="0" min="1" max="4" style="width: 10em;" >
  <br><br>
    <label for="lname">Travel Date </label>
    <input type="date" id="tourDate" value="date" >
    <br><br>
    
  </div>
  <div class="column">
   
   

<script>
function ValueFunction() {
  var x= document.getElementById("adults").value;
  var x;

    if (x === "1") {x = 60;} 
    else if (x === "2" ) {x = 100;}
    else if (x === "3" ) {x = 120;}
    else if (x === "4" ) {x = 140;}
    else if (x === "5" ) {x = 150;}
    else if (x === "6" ) {x = 156;}
    else if (x === "7" ) {x = 168;}
    
    x.innerText = x;
    
  var y = document.getElementById("child").value;
  var y;

    if (y === "1") {y = 10;} 
    else if (y === "2" ) {y = 20;}
    else if (y === "3" ) {y = 30;}
    else if (y === "4" ) {y = 40;}
   
   y.innerText = y;
    
  var z = parseInt(x) +parseInt(y)
  
  document.getElementById("demo").innerHTML = z;
}


</script> 
  <data id="demo"></data>
   
</div>

</body>
</html>

@Rasika Congrats on figuring out a solution! Now that you got something working, I have tweaked your working code above. You will notice I moved all styling out of the HTML elements. Also, the user needs the ability to select 0 for the number of adults and children in case they accidentally select a number and then need to revert it back to 0.

The biggest change to your code is removing all those if/else if statements that are not needed for your specific project. To get the total adults amount, I created an array with each element representing the amount for the same number of adults as the index of the element. For the total children amount, I just multiple the value of the input by 10. I have also renamed your variables to make the code more readable.

If you have any questions about the code, please do not hesitate to ask.

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      font-family: "Cambria";
      font-size: 1em;
    }
    
    * {
      box-sizing: border-box;
    }

    .largerText {
      font-size: 1.5em;
    } 

    .column {
      float: left;
      width: 45%;
      padding: 15px;
      height: 170px;
    }

    .row:after {
      content: "";
      display: table;
      clear: both;
    }

    input {
      width: 10em;
    }
  </style>
</head>

<body>

  <span class="largerText">From $24.00</span>
  <p>Price varies by Group size </p>
  <span class="largerText">Select Date and Travelers</span>

  <div class="row">
    <div class="column">
      <label>Adults</label>
      <input type="number" oninput="calculateTotal()" id="adults" name="adults" value="0" min="0" max="20" />
      <br><br>
      <label>Chilren</label>
      <input type="number" oninput="calculateTotal()" id="child" name="child" value="0" min="0" max="4" />
      <br><br>
      <label for="tourDate">Travel Date </label>
      <input type="date" id="tourDate" value="date">
      <br><br>

    </div>
    <div class="column">
      <script>
        function calculateTotal() {
          var adultPrices = [0, 60, 100, 120, 140, 150, 156, 168];
          var numAdult = document.getElementById("adults").value;
          var numChild = document.getElementById("child").value;
          var total = adultPrices[numAdult] + 10 * numChild;
          document.getElementById("demo").innerHTML = "$" + total.toFixed(2);
        }
      </script>
      <data id="demo">$0.00</data>
    </div>

</body>

</html>

Hi Randell,
Thank you very much for the reply. This seems to be very short and clean.However, I tried this code, it’s not working. I checked several times. But not working. Below is the code of mine which edited as your code. Could you please check it for me once.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 45%;
  padding: 15px;
  height: 170px; 
}


.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>


<font face="Cambria" size="5" >From $24.00</font>
<p>Price varies by Group size </p>
<font face="Cambria" size="5" >Select Date and Travelers</font>

<div class="row">
  <div class="column" >
 <label>Adutls</label>
 <input type="number" oninput="calculateTotal()" id="adults" name="adults" value="0" min="1" max="20" />
    <br><br>
  <label>Child</label>
  <input type="number" oninput="calculateTotal()" id="child" name="child" value="0" min="1" max="4" />
  <br><br>
    <label for="tourDate">Travel Date </label>
    <input type="date" id="tourDate" value="date" >
    <br><br>
    
  </div>
  <div class="column">
<script>
function calculateTotal() {
  var adultPrices = [0,60,100,120,140,150,156,168];  
  var numAdult = document.getElementById("adults").value;
  var numChild = document.getElementById("child").value;
  var total = adultPrices[numAdult] + 10*numChild;
  document.getElementById("demo").innerHTML = "$" + total.toFixed(2);
}
  </script> 
  <data id="demo">$0.00</data>
   
</div>

</body>
</html>

What is not working? Do you see errors in the browser console?

Hi Randell,

Actually it is working in the browser. Perfect. But when I run it in the my wordpress website as a HTML code . it is not working. If you know any reason do advise me. Thank you for your code again.

WordPress is not for displaying arbitrary HTML pages. For one, it will strip out all your script tags as a security measure. If you prefer a web-based environment to experiment with web pages, I recommend something like CodePen for this, or codesandbox.io for more complex projects.

Thank you very much for your advise. I will try one.