[英]Javascript access DOM element in function
我必須修復一個程序，該程序可以計算一組人進行某次旅行的總費用。 一共有三個旅行團，每個旅行團對兒童和成人都有各自的花費。 我相信我已經編寫了正確的java和html來做到這一點，盡管它似乎不起作用。 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>
成人和兒童的數量可以是1到4。選擇的值與javascript中的var成人和var兒童相同。 如果選擇了導游[0]（可能是“整日夢想家”），則可以通過將成年人數乘以costAdults數組中的[0]變量，然后將其加到孩子的等效項中來計算成本。 對於其他具有相應變量的行程，可以執行相同的過程。
問題是，“提交”按鈕不顯示任何費用。 這是一個非常簡單的程序，我沒有使用javascript的經驗，所以找不到問題。
非常感謝您的幫助。
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>
// 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>
如何訪問 HTML DOM 元素 javascript function 到另一個 javascript
[英]How to access HTML DOM element javascript function to another javascript
$（this）沒有為此javascript自動完成功能提供dom元素
[英]$(this) is not giving the dom element for this javascript autocomplete function
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.