在javascript函式中使用HTML表單資料的問題

最近我一直在嘗試更改我的代碼，該代碼接受一個 HTML 用戶輸入并在 javascript 函式中使用它。為此，我將輸入放入查詢字串中，效果很好。然后我嘗試添加另一個輸入。這是目前我的代碼的形式部分。

<form onsubmit="bazaartable()" class="pb-1">
    <div>
        <label>Please enter your tax rate here <i>(If not entered will use 1%)</i>:</label>
        <input type="text" id="taxRateForm" class="border border-cyan-500 rounded"/>
    </div>

    <div>
        <label><i>Enter unique amount here if needed</i>:</label>
        <input type="text" id="amountForm" class="border border-cyan-500 rounded"/>
    </div>
    
    <input type="submit" class="bg-cyan-500 py-1 px-1 rounded"/>
</form>

這是我的一些 javascript 代碼，包括函式 bazaartable。

<script>
    function takevalue1(){
        var taxRate = document.getElementById("taxRateForm").value;
        if (taxRate < 1){
                taxRate = 1
        }
        return taxRate
    }

    function takevalue2(){
        var amount = document.getElementById("amountForm").value;
        return amount
    }
    
    console.log(takevalue1())
    console.log(takevalue2())

    function bazaartable(){
    getbazaar = () => new Promise(a => getbazaar.data && !a(getbazaar.data) || fetch("https://api.hypixel.net/skyblock/bazaar").then(x => a(getbazaar.data = x.json())));
    document.getElementById("bazaar").innerHTML = arrayToTable([["Item Name", "Price x1 -0.1 Including Tax", "Price x64 -0.1 Including Tax", "x"   takevalue2()]], '<div >{{content}}</div>', '<div >{{content}}</div>');
    getbazaar().then(makeArray).then(x => arrayToTable(x, '<div >{{content}}</div>', '<div  title="{{content}}">{{content}}</div>')).then(x => document.getElementById("bazaar").innerHTML  = x);
    }

    var iLikeThese = ["ENCHANTED_SNOW_BLOCK", "ENCHANTED_POTATO", "ENCHANTED_CARROT", "ENCHANTED_CLAY_BALL", "ENCHANTED_DIAMOND", "ENCHANTED_REDSTONE_BLOCK", "PACKED_ICE", "ICE"];
    
    function makeArray(data) {
        var arr = [];
        for (var i in data.products) {
            if (!iLikeThese.includes(i)) continue;
            var price = null;
            try {
                price = data.products[i].buy_summary[0].pricePerUnit
                price = price -= .1
                priceAfterTax = (price - (takevalue1()/100 * price))
            } catch (e) {}
            arr.push([i.replace(/_/g, " ").toLowerCase(), priceAfterTax.toFixed(1), (priceAfterTax*64).toFixed(1), (priceAfterTax*takevalue2()).toFixed(1)]);
        }
        return arr.sort((a, b) => a[0] > b[0] ? 1 : -1);
    }

    function arrayToTable(arr, row, column) {
        var result = "",
            substr = "";
        for (var i = 0; i < arr.length; i  ) {
            substr = "";
            for (var j = 0; j < arr[i].length; j  ) {
                substr  = column.replace(/{{content}}/g, arr[i][j]);
            }
            result  = row.replace(/{{content}}/g, substr);
        }
        return result;
    }
</script>

我試過讓 takevalue1&2 回傳數字，但那行得通。我唯一能想到的是，在函式可以讀取值之前，單擊按鈕會清除輸入。如果有人可以幫忙請回復！

uj5u.com熱心網友回復：

我唯一能想到的是，在函式可以讀取值之前，單擊按鈕會清除輸入

您應該使用Event.preventDefault來避免提交時的這種默認行為。

以下是您應該如何使用它：

1. event呼叫提交函式時傳遞：

<form onsubmit="bazaartable(event)" class="pb-1">
...

2. 在你的提交函式中接受一個引數，說e并呼叫preventDefault這個引數：

function bazaartable(e) {
    e.preventDefault();
    ...

uj5u.com熱心網友回復：

在你的 JavaScript 代碼中使用 Event.preventDefault()

標籤：javascript html 功能 输入

上一篇：在julia中的slurping運算子(args...)之后調度引數

下一篇：如何將自定義函式的輸出存盤在R中？