如何檢測我的提交按鈕是否被javascript點擊

大家
好所以基本上我必須撰寫一個使用javascript計算一定數量的網站，這里是網站的例子： 檢查here。
所以基本上客戶用數量填寫表格，我必須顯示他的命令總數，他不需要提交表格

不完整的代碼是這個：

<h1>Vente de Pizza</h1>
<form method="post" action="#">
    Nom du client<input type="text" name="nom" /> <br> <BR></BR>
    adresse<input type="text" name="adresse" /><br>
    <h1>Produits à acheter</h1>
    <table border = "1">
        <tr><th>Nom du produit</th>
            <th>Prix unitaire</th>
            <th>Quantité</th>
        </tr>
        <tr>
            <td>Pizza 4 fromages</td>
            <td>80</td>
            <td><input type="text" name="QTE1" id = "x1" /></td>
        </tr>
        <tr>
            <td>Pizza Herbo</td>
            <td>75</td>
            <td><input type="text" name="QTE2" id = "x2"/></td>
        </tr>
        <tr>
            <td>Pizza viande hachée</td>
            <td>100</td>
            <td><input type="text" name="QTE3" id = "x3"/></td>
        </tr>
        <tr>
            <td>Pizza Fruit de mer</td>
            <td>120</td>
            <td><input type="text" name="QTE4" id = "x4"/></td>
        </tr>
    </table>
     <p font = "bold" style="font-weight: BOLD;"> Paiment par: </p><br>
     <input type="radio" name="banque" id="">Carte bancaire
     <input type="radio" name="banque" id="">Chèque <BR></BR>
        Numéro de la carte bancaire<input type="text" name="numCB" id = "x5" style="width: 400px;"/> <br><BR>
    <button class="btn" type="submit"  onkeydown = "mySubmit()" id ="bouton">Envoyer</button> <BR></BR>
     <script>
        function TotalCalculate(){
            var x1 = document.getElementById("x1").value;
            var x2 = document.getElementById("x2").value;
            var x3 = document.getElementById("x3").value;
            var x4 = document.getElementById("x4").value;
            var tot = x1*80;
            document.getElementById("Total").addEventListener("click", writeTotal);
            function writeTotal(){
                document.getElementById("Total").write(tot);
            }
        }
    </script>
    Merci de votre visite le montant total de votre commande est : 
    <input type="text" name="Total" onclick="TotalCalculate()" id = "Total"/> 
    </form>
    

如您所見，我從用戶那里獲得了價值并計算了要支付的總額，但它沒有顯示任何內容。我需要添加一個監聽器，但我找不到如何添加一個寫東西的監聽器。請幫忙

uj5u.com熱心網友回復：

您想要的事件是change或input。例如

document.querySelectorAll("input, select, textarea").forEach(function(input) {
  input.addEventListener('input', TotalCalculate)
})

function TotalCalculate() {
  
  var x1 = document.getElementById("x1").value;
  var x2 = document.getElementById("x2").value;
  var x3 = document.getElementById("x3").value;
  var x4 = document.getElementById("x4").value;
  var tot1 = x1 * 80;
  var tot2 = x2 * 75;   // <-- fixed these
  var tot3 = x3 * 100;   // <-- fixed these
  var tot4 = x4 * 120;   // <-- fixed these
  var tot = tot1   tot2   tot3   tot4;
  // document.write("tot");
  document.getElementById("Total").value = tot;

}

<form method="post" action="#" onsubmit="TotalCalculate(); return false">
  <input type="text" id="x1"><br>
  <input type="text" id="x2"><br>
  <input type="text" id="x3"><br>
  <input type="text" id="x4"><br>
  <input type="submit">
</form>

<br>
total: <input id="Total">

uj5u.com熱心網友回復：

你想使用 onclick 事件并讓它執行你的 TotalCalculate 方法。（請注意，它在 html 中的拼寫錯誤。您還需要在事件上使用 preventDefault() 。最后，不要使用 write 而是更新 innerHTML。忘了提到您需要添加一個 id = "Total" 的標簽

function TotalCalculate(event){
           
            event.preventDefault();
            
            var x1 = document.getElementById("x1").value; 
            var x2 = document.getElementById("x2").value;
            var x3 = document.getElementById("x3").value;
            var x4 = document.getElementById("x4").value;
            var tot1 = x1*80;
            var tot2 = x1*75;
            var tot3 = x1*100;
            var tot4 = x1*120;
            var tot = tot1   tot2   tot3   tot4; 
            
            document.getElementById("Total").innerHTML = tot;
            
        }

<h1>Vente de Pizza</h1>
<form >
    Nom du client<input type="text" name="nom" /> <br> <BR></BR>
    adresse<input type="text" name="adresse" /><br>
    <h1>Produits à acheter</h1>
    <table border = "1">
        <tr><th>Nom du produit</th>
            <th>Prix unitaire</th>
            <th>Quantité</th>
        </tr>
        <tr>
            <td>Pizza 4 fromages</td>
            <td>80</td>
            <td><input type="text" name="QTE1" id = "x1" /></td>
        </tr>
        <tr>
            <td>Pizza Herbo</td>
            <td>75</td>
            <td><input type="text" name="QTE2" id = "x2"/></td>
        </tr>
        <tr>
            <td>Pizza viande hachée</td>
            <td>100</td>
            <td><input type="text" name="QTE3" id = "x3"/></td>
        </tr>
        <tr>
            <td>Pizza Fruit de mer</td>
            <td>120</td>
            <td><input type="text" name="QTE4" id = "x4"/></td>
        </tr>
    </table>
     <p font = "bold" style="font-weight: BOLD;"> Paiment par: </p><br>
     <h1 id='Total'>&nbsp;</h1>
     <input type="radio" name="banque" id="">Carte bancaire
     <input type="radio" name="banque" id="">Chèque <BR></BR>
        Numéro de la carte bancaire<input type="text" name="numCB" id = "x5" style="width: 400px;"/> <br><BR>
    <button class="btn" type="text"  onclick = "TotalCalculate(event)" id ="bouton">Envoyer</button> <BR></BR>
    

uj5u.com熱心網友回復：

湊湊，

如果你加載了 jQuery，你可以使用它

$('#bouton').on('click', function(e){ 
e.preventDefault();
alert('clicked');
});

或者如果它只有純 JS 的話：

var button = document.getElementById('button')

button.onclick = function () {
  console.log('Click just happened')
}

標籤：javascripthtml形式添加事件监听器

上一篇：如何使表單上的“提交”按鈕將表單詳細資訊發送到指定的電子郵件

下一篇：無法讀取類“App\Entity\User”中的屬性“user”