Как мне сложить получившиеся числа?

Question

[Андрей Гильгенберг]

У меня есть две формы, с обеих я получаю числа с помощью addEventListener
Но проблема в том, что я не могу вынести получившиеся числа за пределы лисенера, пытался засовывать прослушку и в функцию и в переменную, но ничего не выходит.

<div class="variable">
            <div class="card">        
                <input type="radio" id="rad1" name="license" value="13" >
                <label for="rad1" class="plan" value="13">LICENSE PLAN#1</label>     
                <p class="price" data-price="13">$13 per license</p>
            </div>

            <div class="card">
                <input type="radio" id="rad2" name="license" value="22">   
                <label for="rad2" class="plan">LICENSE PLAN#2</label>     
                <p class="price" data-price="22">$22 per license</p>
            </div>

            <div class="card">
                <input type="radio"  id="rad3" name="license"  value="32">   
                <label for="rad3" class="plan">LICENSE PLAN#3</label>     
                <p class="price" data-price="32">$32 per license</p>
            </div>
        </div>
        <label class="number" for="">Number of license
            <select name="quantity" id="quantity">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
            </select>
        </label>

let input = document.querySelector(".variable")
let select = document.querySelector('#quantity')


input.addEventListener('click', (event) =>{
    if(event.target.value != undefined){
        tarif = event.target.value  
        console.log(tarif)  
    }
})

select.addEventListener('change', (event) =>{
    test = event.target.value
    console.log(test)
})

Comments

[Артем]

Зачем такие костыли? Если вам нужно выбивать уже введенные значения, то проще создать кнопку для отправки даты, нежели пытаться синхронизировать 2 различных обработчика, тем более на разные по принципу события

[Андрей Гильгенберг]

Там не введенные значения, все нужно вытаскивать с value
Задача такая:
Есть три тарифа и срок до от 1 до 10 месяцев
Человек выбирает тариф, выбирает срок, ему показывается сумма для оплаты

[Артем]

В вашем случае корректнее будет в каждом из данных событий проверять, указан ли другой элемент, а если так, то соответственно обрабатывать какой-то код

[Андрей Гильгенберг]

Артем, не совсем вас понял, переформулирую вопрос. Я могу как-то засунуть полученные данные в переменные чтобы манипулировать ими?

[Артем]

Да

[Андрей Гильгенберг]

Артем, надеюсь, когда вы займетесь новым для себя делом, вам попадутся такие же красноречивые и умеющие грамотно доносить информацию люди.

[Артем]

А что я по-вашему должен написать? Ответ на вопрос уже дан и распинаться перед вами нет особого смысла, когда ваш вопрос уже решен

[Артем]

Я четко описал общую работу кода и даже не пытайтесь свести мои предположения к ответу на вопрос, это мои суждения, как можно это реализовать, а не явное пояснение того, как вы должны написать алгоритм

[Артем]

Андрей Гильгенберг, даже, когда пользователь выбирает вариант из предложенных, это считается пользовательским вводом

[Андрей Гильгенберг]

Артем, я не прошу распинаться, я прошу не отвечать бесполезными ответами, уж лучше игнор, чем такое "Да".

Answer 1

[r_g_b_a]

const tariff = document.querySelectorAll('[name="license"]');
const license = document.querySelector('#quantity');

let currentTariff = null;
let currentLicense = null;

function calc() {
  if(!currentTariff || !currentLicense) return;
  
  // тут код для вывода результата
}

tariff.forEach(el => {
  el.addEventListener('change', (e) => {
    currentTariff = e.currentTarget.value;
    calc();
  })
});

license.addEventListener('change', (e) => {
  currentLicense = e.currentTarget.value;
  calc();
})

Comments

[Андрей Гильгенберг]

Спасибо огромное! Благодаря вам я решил тестовое и нашел, что гуглить для более глубоко понимания js, успехов!