Question

我正在尝试创建一个简单的计算函数，但我不明白我错过了什么。单击按钮时：“计算价格”什么也没有发生。你知道为什么吗？

我想要做的是，一旦用户点击计算价格，calculate() 函数就会运行并根据条件显示一条消息。

    <script>
function calculate(e) {
    var personType = document.getElementsById("selectbox");
    var ways = document.getElementById("one");
    var coupon = document.getElementById("coupon");
    var total = 0;
    if (personType == "child") {
        total = 30;
    }
    if (personType == "adult") {
        total = 40;
    }
    if (personType == "pensioner") {
        total = 25;
    }
    if (ways == "two") {
        total = total * 2;
        total = total - 10;
    }
    if (coupon.includes("19")) {
        total = total * 0.9;
        document.getElementById("error").innerHTML = total;
    }
    else {
        e.preventDefault();
        document.getElementById("error").innerHTML = "coupon is not valid";
    }
}
</script>


    <form action="activate.php" method="get">
    <select name="selectbox" id="selectbox">
        <option value="child" id="1">child</option>
        <option value="adult" selected id="2">adult</option>
        <option value="pensioner" id="3">pensioner</option>
    </select>
    <fieldset>
        <legend>Select Direction:</legend>
            <label for="optionradio" >One way</label>
            <input type="radio" id="radio" value="one" name="one">
            <label for="optionradio">Two way</label>
            <input type="radio" id="radio" value="two" name="one">
    </fieldset><br />
    <label for="coupon">Coupon code:</label>
    <input type="text" id="coupon" name="coupon"><br /><br />
    <input type="submit" value="buy a ticket">
</form>
<input type="button" value="calculate price" onclick="calculate()"><br />

<p id="error"></p>

谢谢。

Answer 1

calculate price 按钮不与任何表单关联，因此它不提交任何内容。如果您想计算价格，您可以将提交按钮设为常规按钮并使用 onclick 触发 calculate。

<input type="button" value="calculate price" onclick="calculate()">

再看一遍你的代码，还有很多其他因素妨碍了正确计算价格。

赋值而不是 Jamiec 指出的 if 语句中的比较。使用 == 或 === 比较值，使用 = 为变量赋值。
document.getElementById() 不返回 DOM 元素的值。在 DOM 对象上使用 .value 来获取值。
单选按钮上的重复 id 会阻止获取它们的值。通过为按钮赋予唯一值，您可以使用 .checked

一个工作示例：

<script>
function calculate() {
    var personType = document.getElementById("selectbox").value;
    var twoways = document.getElementById("radio2").checked;
    var coupon = document.getElementById("coupon");
    var total = 0;
    if (personType == "child") {
        total = 30;
    }
    if (personType == "adult") {
        total = 40;
    }
    if (personType == "pensioner") {
        total = 25;
    }
    if (twoways) {
        total = total * 2;
        total = total - 10;
    }
    if (coupon.value.includes("19")) {
        total = total * 0.9;
        document.getElementById("error").innerHTML = total;
    }
    else {
        document.getElementById("error").innerHTML = "coupon is not valid";
    }
    console.log(total)
}
</script>
    <form action="activate.php">
    <select name="selectbox" id="selectbox">
        <option value="child" id="1">child</option>
        <option value="adult" selected id="2">adult</option>
        <option value="pensioner" id="3">pensioner</option>
    </select>
    <fieldset>
        <legend>Select Direction:</legend>
            <label for="optionradio"value="one">One way</label>
            <input type="radio" id="radio1" name="radio" >
            <label for="optionradio" value="two">Two way</label>
            <input type="radio" id="radio2" name="radio" value="two">
    </fieldset><br />
    <label for="coupon">Coupon code:</label>
    <input type="text" id="coupon" name="coupon"><br /><br />
    <input type="submit" value="buy a ticket">
</form>
<input type="button" value="calculate price" onclick="calculate()"><br />
<p id="error"></p>

Answer 2

对您的 HTML 和 javascript 进行一些细微的调整，您就可以优化流程，如下所示。

submit 按钮不会在表单之外提交表单，但根本不需要是 submit 类型的按钮。将其更改为常规按钮并在外部调用 javascript 函数，而不是使用 onclick=calculate() 类型的调用，因为这样可以使标记更清晰且更易于维护。

许多 ID 是多余的，有些是重复的。在大多数情况下，可以删除 ID 并以更简单的方式定位元素 - querySelector 和 querySelectorAll 对此非常有用~尤其是与其他标志（例如 :checked 如下所示）结合使用时票证类型单选按钮。

document.querySelector('[type="button"]').addEventListener('click',e=>{
  let msg='coupon is not valid';
  let oSel=document.querySelector('select[name="selectbox"]');
  let oTicket=document.querySelector('input[type="radio"][name="ticket"]:checked');
  let oCoupon=document.querySelector('input[type="text"][name="coupon"]');
  let total=0;
  
  if( oSel.value=='child' )total=30;
  if( oSel.value=='adult' )total=40;
  if( oSel.value=='pensioner' )total=25;
  
  if( oTicket.value=='two' ) {
    total*=2;
    total-=10;
  }
  if( oCoupon.value.includes('19') ){
    total *= 0.9;
    msg=total;
  }
  document.getElementById("error").innerHTML=msg;
});

<form action="activate.php">
    <select name="selectbox">
        <option value="child">child
        <option value="adult" selected>adult
        <option value="pensioner">pensioner
    </select>
    
    <fieldset>
        <legend>Select Direction:</legend>
        <label>One way<input type="radio" name="ticket" value="one" /></label>
        <label>Two way<input type="radio" name="ticket" value="two" /></label>
    </fieldset>
    
    <br />
    
    <label for="coupon">Coupon code:</label>
    <input type="text" name="coupon" />
    
    <br />
    <br />
    
    <input type="submit" value="buy a ticket">
    <br />
    <input type="button" value="calculate price" />
</form>

<p id="error"></p>

Answer 3

这个怎么样？

<button type="submit" onclick="calculate();">hide</button>

顺便说一句。

<form action="activate.php" method="get">

提交运行功能上的Javascript按钮

3 个答案: