如何從網站上的用戶那里獲取某些輸入並將這些值作為特定參數傳遞到我的 javascript function 中？

Question

我有一個 function 在我運行時在控制台中正常工作：

function sumArray(arr) {

      var res = 0;

    for (var i = 0; i < arr.length; i++) {

        res += arr[i];



    }

        return res;

}


function totalLength(thk, ...dim) {

    if (thk === 7) {

       thk = .1793;

    }

     if (thk === 10) {

       thk = .1345;

    }

     if (thk === 11) {

       thk = .1196;

    }

     if (thk === 12) {

       thk = .1046;

    }

     if (thk === 13) {

       thk = .0897;

    }

     if (thk === 14) {

       thk = .0747;

    }

     if (thk === 16) {

       thk = .0598;

    }

     if (thk === 18) {

       thk = .0478;

    }

     if (thk === 19) {

       thk = .0418;

    }

     if (thk === 20) {

       thk = .0359;

    }

     if (thk === 22) {

       thk = .0299;

    }

     if (thk === 24) {

       thk = .0239;

    }

     if (thk === 26) {

       thk = .0179;

    }

     if (thk === 28) {

       thk = .0149;

    }

    var bendDeduction = (arguments.length - 2) * (1.55 * thk);

    var dimSum = sumArray(dim);

    var lengthMinusBend = dimSum - bendDeduction;

    return lengthMinusBend;

    
}

但是我在網站上設置數字輸入框以接受用戶輸入並將它們作為參數傳遞給 totalLength() function 時遇到了很多麻煩。

對於 thk 參數，我設置了這個框：

<label for="thk">Thickness or Gauge:</label>
      <input type="number" id="thk" name="thk">

對於...dim 參數，我設置了 8 個框，最多可以進行 8 個折彎，如下所示：

  <label for="bend1" id="1" name="bend1">Bend 1:</label>
      <input type="number" name="bend1">

然后我只想在按下提交按鈕時返回 output 作為警報。

我對一切都是全新的，並且在學習的過程中，但我看到了在我目前的工作中找到解決方案的機會，我已經嘗試了一段時間來讓一切都正確。 感謝您的任何幫助

Answer 1

問題是你正在考慮這個有點倒退。 您應該設置可以在特定時刻運行的事件處理回調函數，例如當用戶向表單字段提供輸入或按下某個鍵時。 此時，您可以直接從表單字段中獲取數據，而無需將它們傳遞給函數。

這是一個示例（有關詳細信息，請參見內聯注釋）：

 // Get references to inputs you'll need later const input1 = document.getElementById("num1"); const input2 = document.getElementById("num2"); // Set up an input event handler for the form field // The input event fires whenever the field recieves // input (could be through direct keyboard data entry // or through a paste operation...doesn't matter how document.getElementById("num1").addEventListener("input", processInput); document.getElementById("num2").addEventListener("input", processInput); function processInput(){ // There's no need to pass anything to this funciton because // it can just get the values it needs at this point in time console.clear(); console.log("num1 x num2 = ", num1.value * num2.value); }

 <input type="number" id="num1" value="1"> <input type="number" id="num2" value="1">

此外，您的長if語句是不必要的。 如果您定義兩個 arrays（一個用於可能的輸入，一個用於相應的可能輸出），您可以在第一個數組中找到輸入的索引，然后在第二個數組中獲取相同索引處的項目。

這是一個例子：

 // Two arrays: one for the inputs and one for the corresponding outputs let thkIn = [7,10,11,12,13,14,16,18,19,20,22,24,26,28]; let thkOut = [.1793,.1345,.1196,.1046,.0897,.0747,.0598,.0478,.0418,.0359,.0299,.0239,.0179,.0149]; // Let's say the input was 16.... // Get the index position in the first array of where 16 is: let inPosition = thkIn.indexOf(16); // 6 // Get the corresponding output console.log(thkOut[inPosition]);

Answer 2

工作演示 - https://jsfiddle.net/disingh123/qf6x4r1c/4/

 <form class="" id='my-form'>
        <div class="form-control">
            <label for="thk">Thickness or Gauge:</label>
            <input type="number" id="thk" name="thk">
        </div>
        <div class="form-control">
            <label for="thk">Bend 1:</label>
            <input type="number" id="thk" name="bend1">
        </div>
        <div class="form-control">
            <label for="thk">Bend 2:</label>
            <input type="number" id="thk" name="bend2">
        </div>
        <div class="form-control">
            <label for="thk">Bend 3:</label>
            <input type="number" id="thk" name="bend3">
        </div>
        <div class="form-control">
            <label for="thk">Bend 4:</label>
            <input type="number" id="thk" name="bend4">
        </div>
        <div class="form-control">
            <label for="thk">Bend 5:</label>
            <input type="number" id="thk" name="bend5">
        </div>
        <div class="form-control">
            <label for="thk">Bend 6:</label>
            <input type="number" id="thk" name="bend6">
        </div>
        <div class="form-control">
            <label for="thk">Bend 7:</label>
            <input type="number" id="thk" name="bend7">
        </div>
        <div class="form-control">
            <label for="thk">Bend 8:</label>
            <input type="number" id="thk" name="bend8">
        </div>
        <button type="submit">
            Submit
        </button>
    </form>

document.addEventListener('DOMContentLoaded', function () {
    const formRef = document.getElementById('my-form');
    formRef.addEventListener('submit', function (event) {
        event.preventDefault();
        const formData = new FormData(event.target);
        const formObject = Object.fromEntries(formData);
        const bendArray = []
        for (const [key, value] of Object.entries(formObject)) {
            if (key.indexOf('bend') !== -1) {
                bendArray.push(Number.parseInt(value))
            }
        }
        alert(totalLength(Number.parseInt(formObject['thk']), bendArray))
    });
});

function sumArray(arr) {
    var res = 0;
    for (var i = 0; i < arr.length; i++) {
        res += arr[i];
    }
    return res;
}


function totalLength(thk, dim) {
    if (thk === 7) {
        thk = .1793;
    }
    if (thk === 10) {
        thk = .1345;
    }

    if (thk === 11) {
        thk = .1196;
    }

    if (thk === 12) {
        thk = .1046;
    }

    if (thk === 13) {
        thk = .0897;
    }

    if (thk === 14) {
        thk = .0747;
    }

    if (thk === 16) {
        thk = .0598;
    }

    if (thk === 18) {
        thk = .0478;
    }

    if (thk === 19) {
        thk = .0418;
    }

    if (thk === 20) {
        thk = .0359;
    }

    if (thk === 22) {
        thk = .0299;
    }

    if (thk === 24) {
        thk = .0239;
    }

    if (thk === 26) {
        thk = .0179;
    }

    if (thk === 28) {
        thk = .0149;
    }

    var bendDeduction = (arguments.length - 2) * (1.55 * thk);
    var dimSum = sumArray(dim);
    var lengthMinusBend = dimSum - bendDeduction;
    return lengthMinusBend;
}

Answer 3

在按下提交按鈕時，您可以使用 JS 的 onClick 事件調用 function。

function onSubmit() {
  // And get Value of the input fields using 
  
  let thk = document.getElementById('thk');
  
  // like these the values can be accessed. and passed on to the other functions
  // ........
  
  let getTotalLength = totalLength(thk,...);

}

參考： https://www.w3schools.com/jsref/prop_text_value.asp