Javascript：將輸入數字值插入到最近的數字變量數組onchange中

Question

我需要將用戶輸入數字值插入“ 41” var value = getClosestNum（ 41 ，intarray）;。

我知道“ 41”需要從輸入中調用名稱或ID，但是我生銹的Javascript嘗試似乎總是以= 1產生。我嘗試了幾種getDocument，getID變體，子函數等，但均未成功。

理想情況下，通過在輸入字段上使用onChange而無需重新加載頁面即可立即獲得結果。

是的，它必須是JavaScript，以后才能合並。

    <html>
    <head>
    <title>Find nearest value in javascript</title>
    <script language="javascript">
    // big array to come, example numbers
    var intarray=[1,2,3,5,7,9,11,33,40,42,44,55,66,77,88];
    // Now this function used to find out the close value in array for given number
    function getClosestNum(num, ar)
    {
        var i = 0, closest, closestDiff, currentDiff;
        if(ar.length)
        {
            closest = ar[0];
            for(i;i<ar.length;i++)
            {           
                closestDiff = Math.abs(num - closest);
                currentDiff = Math.abs(num - ar[i]);
                if(currentDiff < closestDiff)
                {
                    closest = ar[i];
                }
                closestDiff = null;
                currentDiff = null;
            }
            //returns first element that is closest to number
            return closest;
        }
        //no length
        return false;
    }
    </script>
    </head>
    <body>

        <form>
            <input type="number" id="test" name="test" onChange="?">
        </form>

    <script language="javascript">
    document.write("Array: "+intarray+"<br>");
    document.write("Value to find 41 <br>");

    // CODE TO CHANGE "41" to id or named input
    // 41 to reference input field

    var value=getClosestNum(41,intarray);

    document.write("Response Received "+value);
    </script>
    </body>
    </html>

Answer 1

您在每個循環中都不再引用closestDiff ，您需要在整個循環中保留該值，並在diff減小時對其進行更新。

function getClosestNum(num, arr) {
    var closest;
    if (arr.length > 0) {
        closest = arr[0];
        var diff = Math.abs(arr[0] - num);
        for (var i = 1; i < arr.length; i++) {
            var currentDiff = Math.abs(arr[i] - num);
            if (diff > currentDiff) {
                closest = arr[i];
                diff = currentDiff;
            }
        }
    }
    return closest;
}

Answer 2

據我了解，您正在嘗試使用input元素獲取一個數字，並且您想要返回最接近該數字的數組中的數字。

我注冊了一個在“輸入”事件上觸發的函數。 嘗試這個：

的HTML

添加以下元素以查看該函數的輸出。 您可以稍后將其重定向到所需的任何位置。

<p id="output"></p>

的JavaScript

// wrap in an onload function to ensure 
// that the elements exist before searching for them
window.onload = () => {

    // cache of elements on the page you want to use
    const testInputElement = document.getElementById('test');
    const outputElement = document.getElementById('output');

    // create a function that will fire whenever input is received
    testInputElement.addEventListener('input', (event) => {
        outputElement.innerHTML = getClosestNum(event.target.value, intarray);
    })
};

`onInput`與`addEventListener('input')`

將onInput直接添加到元素內部的HTML並不像通過addEventListener()以編程方式注冊函數那樣安全。 如果您有一個名為handleInput()的函數，只需將該名稱作為參數傳遞給addEventListener即可，例如

addEventListener('input', handleInput);

您的代碼進行了更改

 <html>
<head>
<title>Find nearest value in javascript</title>
<script language="javascript">
// big array to come, example numbers
var intarray=[1,2,3,5,7,9,11,33,40,42,44,55,66,77,88];
// Now this function used to find out the close value in array for given number
function getClosestNum(num, ar)
{
    var i = 0, closest, closestDiff, currentDiff;
    if(ar.length)
    {
        closest = ar[0];
        for(i;i<ar.length;i++)
        {           
            closestDiff = Math.abs(num - closest);
            currentDiff = Math.abs(num - ar[i]);
            if(currentDiff < closestDiff)
            {
                closest = ar[i];
            }
            closestDiff = null;
            currentDiff = null;
        }
        //returns first element that is closest to number
        return closest;
    }
    //no length
    return false;
}
</script>
</head>
<body>

    <form>
        <input type="number" id="test" name="test" onChange="?">
    </form>
    <p id="output"></p>

<script language="javascript">
document.write("Array: "+intarray+"<br>");
document.write("Value to find 41 <br>");

// CODE TO CHANGE "41" to id or named input
// 41 to reference input field

var value=getClosestNum(41,intarray);

document.write("Response Received "+value);

// wrap in an onload function to ensure that the elements exist before searching for them
window.onload = () => {
    // cache of elements on the page you want to use
    const testInputElement = document.getElementById('test');
    const outputElement = document.getElementById('output');
    // create a function that will fire whenever input is received
    testInputElement.addEventListener('input', (event) => {
        outputElement.innerHTML = getClosestNum(event.target.value, intarray);
    })
};
</script>
</body>
</html>

Javascript：將輸入數字值插入到最近的數字變量數組onchange中

問題描述

2 個解決方案

解決方案1
0 2017-11-04 01:46:42

解決方案2
0 已采納 2017-11-04 02:09:06

的HTML

的JavaScript

`onInput`與`addEventListener('input')`

您的代碼進行了更改

Javascript：將輸入數字值插入到最近的數字變量數組onchange中

問題描述

2 個解決方案

解決方案1 0 2017-11-04 01:46:42

解決方案2 0 已采納 2017-11-04 02:09:06

的HTML

的JavaScript

onInput與addEventListener('input')

您的代碼進行了更改

解決方案1
0 2017-11-04 01:46:42

解決方案2
0 已采納 2017-11-04 02:09:06

`onInput`與`addEventListener('input')`