Пожалуйста, поймите, что я совсем не программист Javascript, поэтому я застрял на последнем шаге в калькуляторе простой формы, который я пытаюсь построить. Я могу загрузить значения массива форм, найти максимальное значение из каждой опции, но я хочу, чтобы он отображал текст вместо значения.
//Set up an associative array
//The keys represent the cards type
//We use this this array when the user selects a cards from the form
var cards_values = new Array();
cards_values["None"] = 0;
cards_values["Lemon"] = 5;
cards_values["Custard"] = 5;
cards_values["Fudge"] = 7;
cards_values["Mocha"] = 8;
cards_values["Raspberry"] = 10;
cards_values["Pineapple"] = 5;
cards_values["Dobash"] = 9;
cards_values["Mint"] = 5;
cards_values["Cherry"] = 5;
cards_values["Apricot"] = 8;
cards_values["Buttercream"] = 7;
cards_values["Chocolate Mousse"] = 12;
//This function finds the cards price based on the
//drop down selection
function getCardValue() {
var cardValue = 0;
//Get a reference to the form id="cardform"
var theForm = document.forms["cardform"];
//Get a reference to the select id="cards"
var selectedCard = theForm.elements["cards"];
//set Card Price equal to value user chose
//For example cards_values["Lemon".value] would be equal to 5
cardValue = cards_values[selectedCard.value];
//finally we return cardValue
return cardValue;
}
//This function finds the cards price based on the
//drop down selection
function getCardValue1() {
var cardValue1 = 0;
//Get a reference to the form id="cardform"
var theForm = document.forms["cardform"];
//Get a reference to the select id="cards"
var selectedCard = theForm.elements["cards1"];
//set Card Price equal to value user chose
//For example cards_values["Lemon".value] would be equal to 5
cardValue1 = cards_values[selectedCard.value];
//finally we return cardValue
return cardValue1;
}
//This function finds the cards price based on the
//drop down selection
function getCardValue2() {
var cardValue2 = 0;
//Get a reference to the form id="cardform"
var theForm = document.forms["cardform"];
//Get a reference to the select id="cards"
var selectedCard = theForm.elements["cards2"];
//set Card Price equal to value user chose
//For example cards_values["Lemon".value] would be equal to 5
cardValue2 = cards_values[selectedCard.value];
//finally we return cardValue
return cardValue2;
}
function calculateTotal() {
//Here we get the total price by calling our function
//Each function returns a number so by calling them we add the values they return together
var highcardvalue = Math.max(getCardValue(), getCardValue1(), getCardValue2());
//display the result
var divobj = document.getElementById('highestcard');
divobj.style.display = 'block';
divobj.innerHTML = "The highest card is " + highcardvalue;
}
function hideTotal() {
var divobj = document.getElementById('highestcard');
divobj.style.display = 'none';
}
Я не могу сказать, следует ли мне перестраивать с использованием obj или если какое-то другое решение будет работать лучше.
Да, давайте продолжим и просто удалим половину этого кода.
edit: обнаружена ошибка в getKeyXVal
, она будет соответствовать первому getKeyXVal
, значение которого соответствует, что не является проблемой, если у вас нет нескольких одинаковых значений с разными ключами (что вы делаете), поэтому, если вы должны выбрать любую комбинацию lemon, custard, pineapple, mint, and cherry
лимон всегда будут указаны как самая высокая карта, даже если они не выбраны. Чтобы исправить это, я добавил массив curSel
, который хранит только текущий выбор и их значения и добавляет его в highCard
вместо cards_values
.
var cards_values = {
None: 0,
Lemon: 5,
Custard: 5,
Fudge: 7,
Mocha: 8,
Raspberry: 10,
Pineapple: 5,
Dobash: 9,
Mint: 5,
Cherry: 5,
Apricot: 8,
Buttercream: 7,
'Chocolate Mousse': 12
},
curSel = [];//store currently selected cards
Object.prototype.getKeyXVal = function (value) {
for (var key in this) {
if (this.hasOwnProperty(key)) {
if (this[key] === value) {
return key;
}
}
}
};
function getCardValue() {
cardValue = 0;//default card value
curSel = [];//clear
var theForm = document.forms.cardform,
selectedCard = theForm.getElementsByTagName("select"),//get selects by tag
biggest;//the biggest number.... EVER
for (var i = 0; i < selectedCard.length; i++) {//for each select
sc = selectedCard[i].value;//current selections
cardValue = cards_values[sc];//get values
curSel[sc]=cardValue;//add current selections
if (!biggest) { biggest=cardValue; }//initial biggest
else if (cardValue > biggest) { biggest = cardValue; }//the largest biggest
}
return biggest;//return biggest
}
function calculateTotal() {
var highcardvalue = getCardValue(),
highCard = curSel.getKeyXVal(highcardvalue),
divobj = document.getElementById('highestcard');
divobj.style.display = 'block';
divobj.innerHTML = "The highest card is " + highCard;
}
function hideTotal() {
var divobj = document.getElementById('highestcard');
divobj.style.display = 'none';
}
Таким образом, это происходит с помощью тегов select
вместо прямого ID
каждого select
. Он просто сохраняет наивысшее значение select
и возвращает его.
Это будет намного проще в управлении и обслуживании.
Вы используете массив как объект - массивы принимают integer
ключи и имеют свойство length. Объекты принимают string
ключи.
И хотя объекты JavaScript часто называют ассоциативным массивом, они не являются. Похожая во многих отношениях, но другая в некоторых важных.
(Тот факт, что массивы построены поверх объектов, означает, что вы работаете, но это неправильно).
var cards_values= {
"None": 0,
"Lemon": 5,
"Custard": 7,
"Fudge": 7
"Mocha": 8,
"Raspberry": 10,
"Pineapple": 5,
"Dobash": 9,
"Mint": 5,
"Cherry": 5,
"Apricot": 8,
"Buttercream": 7,
"Chocolate Mousse": 12
};
Array
там