Javascript 提交按钮运行函数

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() 没有 return 元素的 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

这个怎么样？

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

顺便说一句。

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

Answer 3

通过对您的 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>

Javascript 提交按钮运行函数

Javascript button on submit run function

html

javascript

forms

form-submit

Javascript 提交按钮 运行 函数

Javascript button on submit run function

html

javascript

forms

form-submit

Javascript 提交按钮运行函数