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.
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
You can not get the numbers from the demo elements using .value, you can use .innerText or .innerHTML.
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.
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>
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.
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.