Javascript access DOM element in function

Question

I have to fix a program which calculates a total cost for a group of people to go on a certain tour. There are three tours, each with their individual cost for children and adults. I believe I have written the correct java and html to do so, although it appears not to work. Javascript:

function calculateTotal (){
"use strict";
var adults = document.tour.adults.value;
var children = document.tour.children.value;
var costAdults = [180,120,80];    //stored prices for adults for each tour in an array
var costChildren = [155,120,70];
var tour = document.tour.tours.value;  //isnt used
var cost = 0;


if (document.tour.tours.options[0].selected) {  
//if option 0 (All Day Dreamer) is selected, then cost = cost of adult [0]*number of adults + cost of children [0]*number of children
cost = costAdults[0]*adults + costChildren[0]*children;
}
if (document.tour.tours.options[1].selected) {
cost = costAdults[1]*adults + costChildren[1]*children;
}
if (document.tour.tours.options[2].selected) {
cost = costAdults[2]*adults + costChildren[2]*children;
}
document.getElementById("cost").innerHTML = "Cost is" + cost;
}

HTML:

<title>Captain Joes Tours</title>
<script src="Captain Joes Tours.js" type="text/javascript"></script>
</head>
<body>
<form id="tour">
Adults:
<select name="adults">
<option name="1" value="1">1</option>
<option name="2" value="2">2</option>
<option name="3" value="3">3</option>
<option name="4" value="4">4</option>
</select>
<br>
Children:
<select name="children">
<option name="1" value="1">1</option>
<option name="2" value="2">2</option>
<option name="3" value="3">3</option>
<option name="4" value="4">4</option>
</select>
<br>
Tour:
<select name="tours">
<option name="All Day Dreamer">All Day Dreamer</option>
<option name="Half-Day Safari">Half-Day Safari</option>
<option name="2-Hour Adventure">2-Hour Adventure</option>
</select>
<input id = "submit" type = "button" value = "Submit" onclick =  "calculateTotal();">
</form>
<div id="price">
<p id="cost">Cost:</p>
</div>
</body>

The number of adults and children can be from 1 to 4. The value selected is the same as the var adults and var children in the javascript. If tour [0] is selected which would be All Day Dreamer, the cost can be calculated by multiplying the number of adults by the [0] variable in the costAdults array and adding that to the children's equivalent. The same process can be done for the other tours with the respective variables.

The page looks like this, yes very basic I will fix it later

The problem is, the submit button does not display any cost. It's a very simple program and I'm not experienced in javascript so I cannot find the problem.

Help is much appreciated.

document.tour makes no sense. I think you should spend more time on javascript DOM — vnt
– vnt, Commented Oct 25, 2017 at 4:48
@vnt As i mentioned in the post, I'm not experienced. I'm only a highschool student and I've been assigned this task with little to no education on the topic beforehand. — Michael W
– Michael W, Commented Oct 25, 2017 at 4:51
It's ok, check this tutorialspoint.com/javascript/javascript_html_dom.htm. An hour with that may help you solve your homework ;) — vnt
– vnt, Commented Oct 25, 2017 at 5:04

edkeveked · Accepted Answer · 2017-10-25 05:46:54Z

var adults = 1;
    var children = 1;
    var costAdults = [180,120,80];    //stored prices for adults for each tour in an array
    var costChildren = [155,120,70];
    var tour = "All Day Dreamer";  //isnt used
    var cost = 0;
    
    function myFunctionAdult(sel)
        {
            adults = parseInt(sel.options[sel.selectedIndex].text);
        }
        
    function myFunctionChildren(sel)
        {
            children = parseInt(sel.options[sel.selectedIndex].text);
        }
        
    function myFunctionDreamer(sel)
        {
            tour = sel.options[sel.selectedIndex].text;
        }

    
function calculateTotal (){
    
    
    if (tour === "All Day Dreamer") {  
    //if option 0 (All Day Dreamer) is selected, then cost = cost of adult [0]*number of adults + cost of children [0]*number of children
    cost = costAdults[0]*adults + costChildren[0]*children;
    }
    if (tour === "Half-Day Safari") {
    cost = costAdults[1]*adults + costChildren[1]*children;
    }
    if (tour === "2-Hour Adventure") {
    cost = costAdults[2]*adults + costChildren[2]*children;
    }
    document.getElementById("cost").innerHTML = "Cost is: " + cost;
    }

    <title>Captain Joes Tours</title>
    <script src="Captain Joes Tours.js" type="text/javascript"></script>
    </head>

    <body>
      <form id="tour">
        Adults:
        <select name="adults" id="adults" onChange="myFunctionAdult(this);">
    <option name="1" value="1">1</option>
    <option name="2" value="2">2</option>
    <option name="3" value="3">3</option>
    <option name="4" value="4">4</option>
    </select>
        <br> Children:
        <select name="children" onChange="myFunctionChildren(this)">
    <option name="1" value="1">1</option>
    <option name="2" value="2">2</option>
    <option name="3" value="3">3</option>
    <option name="4" value="4">4</option>
    </select>
        <br> Tour:
        <select name="tours" onChange="myFunctionDreamer(this)">
    <option name="All Day Dreamer">All Day Dreamer</option>
    <option name="Half-Day Safari">Half-Day Safari</option>
    <option name="2-Hour Adventure">2-Hour Adventure</option>
    </select>
        <input id="submit" type="button" value="Submit" onclick="calculateTotal();">
      </form>
      <div id="price">
        <p id="cost">Cost:</p>
      </div>
    </body>

Jorge Gonzalez · Accepted Answer · 2017-10-25 07:34:01Z

// Register a listener to the form submit event
document.getElementById("tour").addEventListener("submit", showCost);

// Presentation.
function showCost (event) {
  var form = event.target.elements;
  document.getElementById("cost").innerHTML = "Cost is " + 
  calculateTotal(
    Number(form.adults.value), 
    Number(form.children.value), 
    form.tours.selectedIndex
  );
  event.preventDefault();
}

// Logic.
function calculateTotal (numbOfAdults, numbOfChildren, tourIndex) {
  var costAdults = [180,120,80];    //stored prices for adults for each tour in an array
  var costChildren = [155,120,70];
  var totalCost = costAdults[tourIndex] * numbOfAdults + costChildren[tourIndex] * numbOfChildren;
  return totalCost;
}

html

<title>Captain Joes Tours</title>
<script src="Captain Joes Tours.js" type="text/javascript"></script>
</head>
<body>
<form id="tour">
Adults:
<select name="adults">
<option name="1" value="1">1</option>
<option name="2" value="2">2</option>
<option name="3" value="3">3</option>
<option name="4" value="4">4</option>
</select>
<br>
Children:
<select name="children">
<option name="1" value="1">1</option>
<option name="2" value="2">2</option>
<option name="3" value="3">3</option>
<option name="4" value="4">4</option>
</select>
<br>
Tour:
<select name="tours">
<option name="All Day Dreamer">All Day Dreamer</option>
<option name="Half-Day Safari">Half-Day Safari</option>
<option name="2-Hour Adventure">2-Hour Adventure</option>
</select>
  <button type="submit">Calculate</button>
</form>
<div id="price">
<p id="cost">Cost:</p>
</div>
</body>

See the Pen qPzQXg by Jorge Gonzalez (@donmae) on CodePen.

Collectives™ on Stack Overflow

Javascript access DOM element in function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related