在 javascript 函数中使用 HTML 表单数据的问题答案

【问题标题】：Problem with using HTML form data in javascript functions在 javascript 函数中使用 HTML 表单数据的问题
【发布时间】：2022-01-20 22:13:00
【问题描述】：

最近我一直在尝试更改我的代码，该代码采用一个 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 返回数字，但这样就可以了。我唯一能想到的是，在函数读取值之前，单击按钮会清除输入。如果有人可以帮忙请回复！

【问题讨论】：

您的提交功能中可能需要preventDefault。
@kiner_shah 我尝试在按下按钮时调用的函数中添加它，但这似乎并没有修复它。 function bazaartable(){ Event.preventDefault() ... } 我是否需要添加更多内容，还是您可以看到导致问题的另一个问题？
我已经发布了答案，请查收。

标签： javascript html function input

【解决方案1】：

我唯一能想到的是，在函数读取值之前，单击按钮会清除输入

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

你应该如何使用它：

调用提交函数时传递event：

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

在您的提交函数中接受一个参数，例如 e 并在此参数上调用 preventDefault：

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

【讨论】：

【解决方案2】：

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

【讨论】：

我尝试在按下按钮时调用的函数中添加它，但这似乎并没有修复它。 function bazaartable(){ Event.preventDefault() ... } 我是否需要添加更多内容，还是您可以看到导致问题的另一个问题？