stackoom
  简体   繁体   中英

Javascript access DOM element in function

 原文  2017-10-25 04:32:20  7   2    javascript/ html

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.

2 answers

solution1
 0 ACCPTED  2017-10-25 05:46:54

 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>

solution2
 0  2017-10-25 07:15:30

// 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 .

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to access HTML DOM element javascript function to another javascript Access DOM element in onload function Add a Javascript function to a Dom element Assign javascript function to a dom element Prevent javascript function to access DOM access a dom element of a different page in Javascript Access DOM element from JavaScript and send event to it Access DOM element using Javascript only Get access of DOM element on other function by this in jquery $(this) is not giving the dom element for this javascript autocomplete function
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM