Создайте функцию, которая запускается при focusin / focusout

Я пытаюсь создать функцию, которая будет запускаться при focusin / focusout и показывать результат в <span>, когда я ввожу данные в поля ввода.

Моя функция подготовки документов находится в <head>, а код ниже - это вызов в теге скрипта после <body>.

Вот снимок экрана: Это поля ввода и диапазон, который показывает результат

Код:

var $costPrice = parseInt($("#cost-price").val()); // Cost price <div>
var $markupPercentage = parseInt($("#markup-percentage").val()); // Markup <div>

var $sellingPrice = ($markupPercentage / 100) * $costPrice + $costPrice;

var $finalPrice = $("#final-price"); // This <span> tag that receive the result of $sellingPrice

function showPrice($sellingPrice, $finalPrice){
    if ($sellingPrice !== null) {
        $finalPrice.html("$" + $sellingPrice);
    } else {
        $finalPrice.html("$0"); // Here I want to replace Nan by $0
    }
};

$costPrice.focusout(showPrice); // I want to trigger/show the result.
$markupPercentage.focusout(showPrice); // I want to trigger/show the result.

Если я ввожу значение во входные данные и запускаю этот код ниже в консоли, он работает. Но это не интерактивно. Я бы хотел получить тот же результат, но в полях ввода focusin / focusout.

var $costPrice = parseInt($("#cost-price").val()); // Cost price <div>
var $markupPercentage = parseInt($("#markup-percentage").val()); // Markup <div>

var $sellingPrice = ($markupPercentage / 100) * $costPrice + $costPrice;

var $finalPrice = $("#final-price").html("$" + $sellingPrice);

Спасибо за помощь !


javascript function triggers focusout focusin
person Dave    schedule 08.12.2020    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Ты должен попытаться:

$("#cost-price").focusout(function(){
//do something
});

$("#final-price").focusout(function(){
//do something
});
person Tí Sún    schedule 08.12.2020

arrow_upward
0
arrow_downward

Разве active и blur не работали бы? Активно будет, когда кто-то щелкает по входам, и размывается, когда кто-то снимает выделение.

person LucR    schedule 08.12.2020

arrow_upward
0
arrow_downward

Наконец, я нашел решение самостоятельно.

Переменные, объем и способ, которым я построил function sellingPrice, были основными проблемами.

Затем я использую метод .on() вместо методов .focusout() или .focusin() для вывода результата при вводе данных в поля ввода.

Код:

var $costPrice;
var $markupPercentage;
var $sellingPrice;

function sellingPrice($costPrice, $markupPercentage, $sellingPrice) {
    
  $costPrice = parseInt($("#cost-price").val() || 0);
  $markupPercentage = parseInt($("#markup-percentage").val() || 0);

  $sellingPrice = ($markupPercentage / 100) * $costPrice + $costPrice;

  $("#final-price").html("$" + $sellingPrice || 0);
}

$("#cost-price").on('input', sellingPrice);
$("#markup-percentage").on('input', sellingPrice);

Спасибо!

person Dave    schedule 08.12.2020