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

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>

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>

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.