Я пытаюсь передать целевые значения события в другую функцию - PullRequest
Новая
       11

Я пытаюсь передать целевые значения события в другую функцию

0 голосов
/ 01 декабря 2018

Я установил два события, одно в футах и ​​одно в дюймах.Я пытаюсь получить значение каждого события, которое будет в футах и ​​дюймах, но я не могу из-за масштаба каждого события.Есть ли способ передать оба значения в мою функцию totalHeight, чтобы я мог добавить два значения вместе?

const justFeet = totalFeet.addEventListener('input', (e) => {
    const heightInFeet = e.target.value;
    let displayFeet = document.createElement('h3')
    displayFeet.textContent = heightInFeet * 12
    // totalInches.appendChild(displayFeet)
})

const justInches = inches.addEventListener('input', (e) => {
    const addOnInches = e.target.value;
    let displayInches = document.createElement('h3')
    displayInches.textContent = addOnInches
    // totalInches.appendChild(displayInches)
})
    
function totalHeight (feet, inches) {
    const finalTotal = feet + inches;
    let finalHeight = document.createElement('h3')
    finalHeight.textContent = finalTotal
    totalInches.appendChild(finalHeight)
}

totalHeight(displayFeet, displayInches)

1 Ответ

0 голосов
/ 01 декабря 2018

Пример того, что, похоже, вы пытаетесь сделать.Вам нужно сделать еще кое-что, например, я использовал целые числа ниже, но вы могли бы использовать плавающие числа и, возможно, добавить лучшую обработку для isNaN (). 

<html>
<style>
</style>

    Feet:<input id="feet" type="number"></input>
    Inches:<input id="inches" type="number"></input>
    <h3>Feet converted to inches: <span id="displayFeetToInches"></span></h3>
    <h3>Inches: <span id="displayInches"></span></h3>
    <h3>Total inches:<span id="finalHeight"></span></h3>

    <script>

        const feet = document.getElementById("feet");
        const inches = document.getElementById("inches");
        const total = document.getElementById("total");  //in inches
        const displayFeetToInches = document.getElementById("displayFeetToInches");  //in inches
        const displayInches = document.getElementById("displayInches");  //in inches

        const justFeet = feet.addEventListener('input', (e) => {
            console.log('justFeet');
            const heightInFeet = e.target.value;
            displayFeetToInches.textContent = heightInFeet * 12;
            totalHeight();
        })

        const justInches = inches.addEventListener('input', (e) => {
            console.log('justInches');
            const addOnInches = e.target.value;
            displayInches.textContent = addOnInches
            totalHeight();
        })

        function totalHeight (feet, inches) {
            console.log('totalinches');
            const ftToInches = displayFeetToInches.textContent;
            const addOn = displayInches.textContent;
            const finalTotal = parseInt(ftToInches) + parseInt(addOn);
            finalHeight.textContent = finalTotal
        }

    </script>
</html>
...