Question

我曾尝试过几次创建价格计算器，但价格永远不会显示在最后。我仍然是Javascript的新手，所以我不确定是否有错误的编码。我相信我理解它应该会出现，但也许有人可能会在我的代码中看到我做错了什么？

var eventDurationArray = new Array();
eventDurationArray["2hrs"]=120;
eventDurationArray["3hrs"]=180;
eventDurationArray["4hrs"]=240;
eventDurationArray["5hrs"]=300;
eventDurationArray["6hrs"]=360;

//RADIO BUTTON - EVENT DURATION TEST
function getEventDuration() {
  var EventDuration = 0;

  var theForm = document.forms["#quote"];

  var selectedEventDuration = theForm.elements["selectedDuration"];

  for(var i = 0; i < selectedDuration.length; i++)
  {
    if(selectedDuration[i].checked)
    {
      EventDuration = eventDurationArray[selectedDuration[i].value];

      break;
    }
  }

  return EventDuration;
}

//DIV - TOTAL PRICE TEST
function getTotals() {
  var totalPrice = getEventDuration();
  var totalPriceDIV = document.getElementById("#totalPrice");
  totalPriceDIV.innerHTML = "Total: $"+totalPrice;
}

<form id="quote" action="" onsubmit="return false;">
  <input type="radio"  name="selectedDuration" value="2hrs" onclick="getTotals()" />
  Round cake 6" -  serves 8 people ($20)
  <input type="radio"  name="selectedDuration" value="3hrs" onclick="getTotals()" />
  Round cake 8" - serves 12 people ($25)
  <input type="radio"  name="selectedDuration" value="4hrs" onclick="getTotals()" />
  Round cake 10" - serves 16 people($35)
  <input type="radio"  name="selectedDuration" value="5hrs" onclick="getTotals()" />
  Round cake 12" - serves 30 people($75)
  <br />
  <br />
  <div id="totalPrice" style="color: red; text-align: center; font-size: 18px;"></div>
</form>

Answer 1

您的代码中存在一些问题..

document.forms["quote"] - 删除#并设置name属性，而不是id。
将var selectedEventDuration更改为var selectedDuration = theForm.elements["selectedDuration"];
从#

nt.getElementById("#totalPrice");

var eventDurationArray = new Array();
eventDurationArray["2hrs"]=120;
eventDurationArray["3hrs"]=180;
eventDurationArray["4hrs"]=240;
eventDurationArray["5hrs"]=300;
eventDurationArray["6hrs"]=360;

//RADIO BUTTON - EVENT DURATION TEST
function getEventDuration() {
  var EventDuration = 0;

  var theForm = document.forms["quote"];

  var selectedDuration = theForm.elements["selectedDuration"];

  for(var i = 0; i < selectedDuration.length; i++)
  {
    if(selectedDuration[i].checked)
    {
      EventDuration = eventDurationArray[selectedDuration[i].value];

      break;
    }
  }

  return EventDuration;
}

//DIV - TOTAL PRICE TEST
function getTotals() {
  var totalPrice = getEventDuration();
  var totalPriceDIV = document.getElementById("totalPrice");
  totalPriceDIV.innerHTML = "Total: $"+totalPrice;
}

<form name="quote" action="" onsubmit="return false;">
  <input type="radio"  name="selectedDuration" value="2hrs" onclick="getTotals()" />
  Round cake 6" -  serves 8 people ($20)
  <input type="radio"  name="selectedDuration" value="3hrs" onclick="getTotals()" />
  Round cake 8" - serves 12 people ($25)
  <input type="radio"  name="selectedDuration" value="4hrs" onclick="getTotals()" />
  Round cake 10" - serves 16 people($35)
  <input type="radio"  name="selectedDuration" value="5hrs" onclick="getTotals()" />
  Round cake 12" - serves 30 people($75)
  <br />
  <br />
  <div id="totalPrice" style="color: red; text-align: center; font-size: 18px;"></div>
</form>

Answer 2

我已经解决了你的javascript中的小问题，因为它对你有帮助。

function getEventDuration() {
    var EventDuration = 0;
    var theForm = document.forms["quote"];
    var selectedEventDuration = theForm.elements["selectedDuration"];
    for (var i = 0; i < selectedEventDuration.length; i++) {
        if (selectedEventDuration[i].checked) {
            EventDuration = eventDurationArray[selectedEventDuration[i].value];
            break;
        }
    }
    return EventDuration;
}
//DIV - TOTAL PRICE TEST
function getTotals() {
    var totalPrice = getEventDuration();

    var totalPriceDIV = document.getElementById("totalPrice");

    totalPriceDIV.innerHTML = "Total: $" + totalPrice;
}

信息： - ＃是jquery元素的指标，所以当你只使用javascript时则不需要。

Answer 3

使用document.getElementById("#totalPrice");

更改document.getElementById("totalPrice");

Answer 4

在代码示例上打开检查器，显示elements未定义。

我建议使用document.querySelector查找有效的单选按钮。

EventDuration = document.querySelector("input[name= selectedDuration]:checked").value

此外，getElementById只需要一个id，而不是#。再一次，我倾向于坚持document.querySelector一切，保持简单。

Javascript价格计算器问题

4 个答案: