在 javascript 函数中使用 HTML 表单数据时出现问题

Question

最近我一直在尝试更改我的代码，该代码接受一个 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 class="row">{{content}}</div>', '<div class="column">{{content}}</div>');
    getbazaar().then(makeArray).then(x => arrayToTable(x, '<div class="row">{{content}}</div>', '<div class="column" 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 return 数字，但那是行得通的。我唯一能想到的是，在函数读取值之前单击按钮会清除输入。如果有人能帮忙请回复！

Answer 1

在您的 JavaScript 代码中使用 Event.preventDefault()

Answer 2

The only thing that I can think of is that clicking the button clears the inputs before the function can read the values

您应该使用 Event.preventDefault 来避免提交时的这种默认行为。

使用方法如下：

调用提交函数时传递 event：

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

在你的提交函数中接受一个参数，比如 e 并在这个参数上调用 preventDefault：

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

在 javascript 函数中使用 HTML 表单数据时出现问题

Problem with using HTML form data in javascript functions

html

javascript

input

function