用户可以像下面的例子一样输入任何数组数字和函数输出吗?(HTML和Javascript)

Question

是否有一种方法可以重新创建这个函数来要求用户在"输入文本框"中输入。其中一个数组数字，如- 23.5，然后函数将输出39?

这是html代码:

<label for="usr">Foot lenght (cm):</label>
<input type="number" class="form-control " id="usr">

脚本如下:

var shoeSizeMap = [
{ cm: '23.5', euroSize: '39' },
{ cm: '24.1', euroSize: '39' },
{ cm: '24.4', euroSize: '40' },
]

function findEuroSizeByCm(inputCm) {
var result = shoeSizeMap.find(function(shoeSize) {
return shoeSize.cm == inputCm;
});
return result;
}


(function () {
var old = console.log;
var logger = document.getElementById('log');
console.log = function () {
for (var i = 0; i < arguments.length; i++) {
if (typeof arguments[i] == 'object') {
logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(arguments[i], undefined, 2) : arguments[i]) + '<br />';
} else {
logger.innerHTML += arguments[i] + '<br />';
}
}
}
})();

console.log(findEuroSizeByCm('23.5').euroSize); 

Answer 1

您可以向输入添加一个事件侦听器，获取输入的值并将其传递给函数。如果结果有效，console.log euroSize.

另外，我没有对你的console.log函数做任何事情，因为它与问题无关。

let usr = document.querySelector("#usr");
var shoeSizeMap = [
{ cm: '23.5', euroSize: '39' },
{ cm: '24.1', euroSize: '39' },
{ cm: '24.4', euroSize: '40' },
]

function findEuroSizeByCm(inputCm) {
var result = shoeSizeMap.find(function(shoeSize) {
return shoeSize.cm == inputCm;
});
return result;
}
function getSize(ev){
let size = findEuroSizeByCm(ev.target.value)
if(size)console.log(size.euroSize); 
}
usr.addEventListener("input",getSize);

<label for="usr">Foot lenght (cm):</label>
<input type="number" class="form-control " id="usr">