Recently I have been trying to change my code that took one HTML user input and used it in a javascript function. To do this I put the input into a query string and that worked fine. Then I tried to add another input. This is currently the form part of my code.
<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>
This is some of my javascript code including the function 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>
I have tried making takevalue1&2 return numbers but that and that works. The only thing that I can think of is that clicking the button clears the inputs before the function can read the values. If anyone can help please reply!
