CODEWITHSUNDEEP
jqueryfindclosest
Sam
Sam

Reputation: 11

jQuery closest() and find()

I'm trying to figure out a way to only select one calculator at a time by using jQuery transverse functions closest() and find(). At its current state when pressing a button it will use both calculators. I need it to only use one calculator at a time. Need some help. Is the html laid out correctly? I know that with many tutorials on DOM Traversing they use ul and li, should I here?

index.html

<!DOCTYPE html>
<html>
<head>
<title>Calculator App</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
    <div class="calcWrap">
        <h2>Calculator One</h2>
        <div action="" class="calculator">
                <input type="text" class="answer" value="" disabled="disabled"/><br>
                <button type="button" class="number 1" value="1">1</button>
                <button type="button" class="number 2" value="2">2</button>
                <button type="button" class="number 3" value="3">3</button>
                <button type="button" class="symbol /" value="/">/</button <br>
                <button type="button" class="number 4" value="4">4</button>
                <button type="button" class="number 5" value="5">5</button>
                <button type="button" class="number 6" value="6" >6</button>
                <button type="button" class="symbol *" value="*">*</button><br>
                <button type="button" class="number 7" value="7">7</button>
                <button type="button" class="number 8" value="8">8</button>
                <button type="button" class="number 9" value="9">9</button>
                <button type="button" class="symbol -" value="-">-</button><br>
                <button type="button" class="number 0" value="0" >0</button>
                <button type="button" class="number ." value=".">.</button>
                <button type="button" class="C" value="C">C</button>
                <button type="button" class="symbol +" value="+">+</button><br>
                <button type="button" class="equals =">=</button>
        </div>
        <br />
        <br />
        <h2>Calculator One</h2>
        <div action="" class="calculator">
                <input type="text" class="answer" value="" disabled="disabled"/><br>
                <button type="button" class="number 1" value="1">1</button>
                <button type="button" class="number 2" value="2">2</button>
                <button type="button" class="number 3" value="3">3</button>
                <button type="button" class="symbol /" value="/">/</button><br>
                <button type="button" class="number 4" value="4">4</button>
                <button type="button" class="number 5" value="5">5</button>
                <button type="button" class="number 6" value="6" >6</button>
                <button type="button" class="symbol *" value="*">*</button><br>
                <button type="button" class="number 7" value="7">7</button>
                <button type="button" class="number 8" value="8">8</button>
                <button type="button" class="number 9" value="9">9</button>
                <button type="button" class="symbol -" value="-">-</button><br>
                <button type="button" class="number 0" value="0" >0</button>
                <button type="button" class="number ." value=".">.</button>
                <button type="button" class="C" value="C">C</button>
                <button type="button" class="symbol +" value="+">+</button><br>
                <button type="button" class="equals =">=</button>
        </div>
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

styles.css

 body {
margin-left: auto;
margin-right: auto;
background-color: lightgray;
}

html {
font-size: 1vw;
}

h2 {
font-size: 2rem;
color: white;
}

.calcWrap {
width: 43rem;
margin-right: auto;
margin-left: auto;
padding: 2rem;
margin-top: 10rem;
border: 0.3rem solid black;
border-radius: 1.5rem;
background-color: #3E7CB1;
}

li {
float: left;
}

.answer {
width: 43rem;
height: 12rem;
background-color: lightgray;
font-size: 4rem;
text-align: right;
font-weight: lighter;
padding: 2rem;
margin-bottom: 1rem;
border-radius: 0.5rem;
box-sizing: border-box;
}

.number {
width: 10.5rem;
height: 10.5rem;
background-color: #DBD5B5;
margin-top: 0.5rem;
color: black;
font-size: 4rem;
border-radius: 1rem;
font-weight: bold;
}

.symbol {
width: 10.5rem;
height: 10.5rem;
background-color: #FCAB10;
margin-top: 0.5rem;
color: black;
font-size: 4rem;
border-radius: 1rem;
font-weight: bold;
} 

.C {
width: 10.5rem;
height: 10.5rem;
background-color: #F8333C;
margin-top: 0.5rem;
color: #E4FDE1;
font-size: 4rem;
border-radius: 1rem;
font-weight: bold;
} 

.equals {
width: 43rem;
height: 10rem;
background-color: #44AF69;
margin-top: 5px;
font-size: 6rem;
color: white;
border-radius: 1rem;
font-weight: bold;
}

scripts.js

$(document).ready(function() {
var numberOne;
var numberTwo;
var operator;
var $result = $(".answer");

function reset() {
    numberOne = null;
    numberTwo = null;
    operator = null;
    $result.val("");
}

reset();

$(".number").click(function() {
    var clickDigit = $(this).text();
    var currentVal = $result.val();
    var newVal;
    if(currentVal === "") {
        newVal = clickDigit;
    } else {
        newVal = currentVal + clickDigit;
    }
    $result.val(newVal);
});

$(".symbol").click(function() {
    operator = $(this).text();
    numberOne = parseFloat($result.val());
    $result.val("");
});

$(".equals").click(function() {

    var total;

    numberTwo = parseFloat($result.val());

    if(operator === "+") {
        total = numberOne + numberTwo;
    } 
    else if (operator === "-") {
        total = numberOne - numberTwo;
    }
    else if (operator === "/") {
        total = numberOne / numberTwo;
    }
    else if (operator === "*") {
        total = numberOne * numberTwo;
    }

    $result.val(total);

});

$(".C").click(function() {
    reset();
});

$(this).closest(button).find(".answer");

});

Upvotes: 0

Views: 15390

Answers (4)

Sam
Sam

Reputation: 11

Was alerted to this question I posted back in 2016 and though I'd post what my solution was. Link to live page here.

$(document).ready(function() {

    var numberOne; // setting global variable for first number(s) submitted
    var numberTwo; // setting global variable for second number(s) submitted
    var operator; // global for operator buttons
    var result; // setting global display as blank because we don't know which calculator to use yet


        $('.number').click(function() {
            result = $(this).closest('.calculator').find('.answer'); // click event using .closest() to travel up DOM to locate nearest '.calculator', then used '.find' to output to '.answer' input
            var clickDigit = $(this).text();
            var newVal; 
            var currentVal = result.val();

            if(currentVal === '') { // if no value newVal will equal clickDigit
                newVal = clickDigit;
            } else {
                newVal = currentVal + clickDigit; // adds more than one number to screen
            }

            result.val(newVal); // outputing to screen

        });

        $('.symbol').click(function() {
            operator = $(this).text(); // storing operator variable to be used 
            numberOne = parseInt(result.val()); // dealing with numbers, returns an integer
            result.val('');
        });

        $('.equals').click(function() {
            
            numberTwo = parseInt(result.val()); // dealing with numbers, returns an integer

            var $total; // local variable 

            // takes from local variable operator and checks the value
            if(operator === '+') {
                total = parseInt(numberOne + numberTwo); // adding together // dealing with numbers, returns an integer
            } 
            else if (operator === '-') {
                total = parseInt(numberOne - numberTwo); // subtracting one from another // dealing with numbers, returns an integer
            }
            else if (operator === '/') {
                total = parseInt(numberOne / numberTwo); // dividing one from another // dealing with numbers, returns an integer
            }
            else if (operator === '*') {
                total = parseInt(numberOne * numberTwo); // multiplying together // dealing with numbers, returns an integer
            }

            result.val(total); // outputting equals .clicked event

        });

        $('.C').click(function() { // clearing all values to null or empty
            numberOne = [];
            numberTwo = [];
            operator = [];
            result.val('');
        });

});
body {
    margin-left: auto;
    margin-right: auto;
    background-color: lightgray;
}

html {
    font-size: 1vw;
}

h2 {
    font-size: 2rem;
    color: white;
}

.calcWrap {
    width: 43rem;
    margin-right: auto;
    margin-left: auto;
    padding: 2rem;
    margin-top: 10rem;
    border: 0.3rem solid black;
    border-radius: 1.5rem;
    background-color: #3E7CB1;
}

li {
    float: left;
}

.answer {
    width: 43rem;
    height: 12rem;
    background-color: lightgray;
    font-size: 4rem;
    text-align: right;
    font-weight: lighter;
    padding: 2rem;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    box-sizing: border-box;
}

.pressed {
    background-color: blue;
}

/*.workSpace {
    width: 43rem;
    height: 4rem;
    background-color: lightgray;
    font-size: 2rem;
    text-align: left;
    font-weight: lighter;
    padding: 2rem;
    border-radius: 0.5rem;
    box-sizing: border-box;
}*/

.number {
    width: 10.5rem;
    height: 10.5rem;
    background-color: #DBD5B5;
    margin-top: 0.5rem;
    color: black;
    font-size: 4rem;
    border-radius: 1rem;
    font-weight: bold;
}

.symbol {
    width: 10.5rem;
    height: 10.5rem;
    background-color: #FCAB10;
    margin-top: 0.5rem;
    color: black;
    font-size: 4rem;
    border-radius: 1rem;
    font-weight: bold;
} 

.C {
    width: 10.5rem;
    height: 10.5rem;
    background-color: #F8333C;
    margin-top: 0.5rem;
    color: #E4FDE1;
    font-size: 4rem;
    border-radius: 1rem;
    font-weight: bold;
} 

.equals {
    width: 43rem;
    height: 10rem;
    background-color: #44AF69;
    margin-top: 5px;
    font-size: 6rem;
    color: white;
    border-radius: 1rem;
    font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>Calculator App</title>
    <link rel='stylesheet' type='text/css' href='styles.css'>
</head>

<body>
        <div class='calcWrap'>
            <h2>Calculator One</h2>
            <div class='calculator'>
                    <input type='text' class='answer' value='' disabled='disabled'/><br>
                    <button type='button' class='number 1' value='1'>1</button>
                    <button type='button' class='number 2' value='2'>2</button>
                    <button type='button' class='number 3' value='3'>3</button>
                    <button type='button' class='symbol /' value='/'>/</button><br>
                    <button type='button' class='number 4' value='4'>4</button>
                    <button type='button' class='number 5' value='5'>5</button>
                    <button type='button' class='number 6' value='6' >6</button>
                    <button type='button' class='symbol *' value='*'>*</button><br>
                    <button type='button' class='number 7' value='7'>7</button>
                    <button type='button' class='number 8' value='8'>8</button>
                    <button type='button' class='number 9' value='9'>9</button>
                    <button type='button' class='symbol -' value='-'>-</button><br>
                    <button type='button' class='number 0' value='0' >0</button>
                    <button type='button' class='number .' value='.'>.</button>
                    <button type='button' class='C' value='C'>C</button>
                    <button type='button' class='symbol +' value='+'>+</button><br>
                    <button type='button' class='equals ='>=</button>
            </div>

            <h2>Calculator Two</h2>

            <div class='calculator'>
                    <input type='text' class='answer' value='' disabled='disabled'/><br>
                    <button type='button' class='number 1' value='1'>1</button>
                    <button type='button' class='number 2' value='2'>2</button>
                    <button type='button' class='number 3' value='3'>3</button>
                    <button type='button' class='symbol /' value='/'>/</button><br>
                    <button type='button' class='number 4' value='4'>4</button>
                    <button type='button' class='number 5' value='5'>5</button>
                    <button type='button' class='number 6' value='6' >6</button>
                    <button type='button' class='symbol *' value='*'>*</button><br>
                    <button type='button' class='number 7' value='7'>7</button>
                    <button type='button' class='number 8' value='8'>8</button>
                    <button type='button' class='number 9' value='9'>9</button>
                    <button type='button' class='symbol -' value='-'>-</button><br>
                    <button type='button' class='number 0' value='0' >0</button>
                    <button type='button' class='number .' value='.'>.</button>
                    <button type='button' class='C' value='C'>C</button>
                    <button type='button' class='symbol +' value='+'>+</button><br>
                    <button type='button' class='equals ='>=</button>
            </div>
        </div>

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js'></script>
    <script src='script.js'></script>
</body>
</html>

Upvotes: 1

PeterKA
PeterKA

Reputation: 24638

Your code does need a lot of cleanup but seeing the scope you have set on $result, adding the following line to the $('.number') click event handler, your issue is partially resolved:

$result = $(this).closest('.calculator').find('.answer');

(See the demo below)

As long as you start by clicking a .number it works. A slightly better approach would be to add this line to every event handler. The demo is not an attempt to solve your problem but simply to demonstrate what approach to take to solve it.

I have removed the following line (by commenting it).

$(this).closest(button).find(".answer");

This is because it does not do what you want it to do, this at that point refers to window and there's nothing you're doing with the resulting collection even if the scope was correct; this in your case would only point to a DOM element within an event handler.

DEMO

$(document).ready(function() {
    var numberOne;
    var numberTwo;
    var operator;
    var $result = $(".answer");

    function reset() {
        numberOne = null;
        numberTwo = null;
        operator = null;
        $result.val("");
    }

    reset();

    $(".number").click(function() {
        $result = $(this).closest('.calculator').find('.answer'); //Change 1: ADDED
        var clickDigit = $(this).text();
        var currentVal = $result.val();
        var newVal;
        if (currentVal === "") {
            newVal = clickDigit;
        } else {
            newVal = currentVal + clickDigit;
        }
        $result.val(newVal);
    });

    $(".symbol").click(function() {
        operator = $(this).text();
        numberOne = parseFloat($result.val());
        $result.val("");
    });

    $(".equals").click(function() {

        var total;

        numberTwo = parseFloat($result.val());

        if (operator === "+") {
            total = numberOne + numberTwo;
        } else if (operator === "-") {
            total = numberOne - numberTwo;
        } else if (operator === "/") {
            total = numberOne / numberTwo;
        } else if (operator === "*") {
            total = numberOne * numberTwo;
        }

        $result.val(total);

    });

    $(".C").click(function() {
        reset();
    });
  
    //$(this).closest(button).find(".answer"); //Change 2: REMOVED

});
body {
margin-left: auto;
margin-right: auto;
background-color: lightgray;
}

html {
font-size: 1vw;
}

h2 {
font-size: 2rem;
color: white;
}

.calcWrap {
width: 43rem;
margin-right: auto;
margin-left: auto;
padding: 2rem;
margin-top: 10rem;
border: 0.3rem solid black;
border-radius: 1.5rem;
background-color: #3E7CB1;
}

li {
float: left;
}

.answer {
width: 43rem;
height: 12rem;
background-color: lightgray;
font-size: 4rem;
text-align: right;
font-weight: lighter;
padding: 2rem;
margin-bottom: 1rem;
border-radius: 0.5rem;
box-sizing: border-box;
}

.number {
width: 10.5rem;
height: 10.5rem;
background-color: #DBD5B5;
margin-top: 0.5rem;
color: black;
font-size: 4rem;
border-radius: 1rem;
font-weight: bold;
}

.symbol {
width: 10.5rem;
height: 10.5rem;
background-color: #FCAB10;
margin-top: 0.5rem;
color: black;
font-size: 4rem;
border-radius: 1rem;
font-weight: bold;
} 

.C {
width: 10.5rem;
height: 10.5rem;
background-color: #F8333C;
margin-top: 0.5rem;
color: #E4FDE1;
font-size: 4rem;
border-radius: 1rem;
font-weight: bold;
} 

.equals {
width: 43rem;
height: 10rem;
background-color: #44AF69;
margin-top: 5px;
font-size: 6rem;
color: white;
border-radius: 1rem;
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Calculator App</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
    <div class="calcWrap">
        <h2>Calculator One</h2>
        <div action="" class="calculator">
                <input type="text" class="answer" value="" disabled="disabled"/><br>
                <button type="button" class="number 1" value="1">1</button>
                <button type="button" class="number 2" value="2">2</button>
                <button type="button" class="number 3" value="3">3</button>
                <button type="button" class="symbol /" value="/">/</button <br>
                <button type="button" class="number 4" value="4">4</button>
                <button type="button" class="number 5" value="5">5</button>
                <button type="button" class="number 6" value="6" >6</button>
                <button type="button" class="symbol *" value="*">*</button><br>
                <button type="button" class="number 7" value="7">7</button>
                <button type="button" class="number 8" value="8">8</button>
                <button type="button" class="number 9" value="9">9</button>
                <button type="button" class="symbol -" value="-">-</button><br>
                <button type="button" class="number 0" value="0" >0</button>
                <button type="button" class="number ." value=".">.</button>
                <button type="button" class="C" value="C">C</button>
                <button type="button" class="symbol +" value="+">+</button><br>
                <button type="button" class="equals =">=</button>
        </div>
        <br />
        <br />
        <h2>Calculator Two</h2>
        <div action="" class="calculator">
                <input type="text" class="answer" value="" disabled="disabled"/><br>
                <button type="button" class="number 1" value="1">1</button>
                <button type="button" class="number 2" value="2">2</button>
                <button type="button" class="number 3" value="3">3</button>
                <button type="button" class="symbol /" value="/">/</button><br>
                <button type="button" class="number 4" value="4">4</button>
                <button type="button" class="number 5" value="5">5</button>
                <button type="button" class="number 6" value="6" >6</button>
                <button type="button" class="symbol *" value="*">*</button><br>
                <button type="button" class="number 7" value="7">7</button>
                <button type="button" class="number 8" value="8">8</button>
                <button type="button" class="number 9" value="9">9</button>
                <button type="button" class="symbol -" value="-">-</button><br>
                <button type="button" class="number 0" value="0" >0</button>
                <button type="button" class="number ." value=".">.</button>
                <button type="button" class="C" value="C">C</button>
                <button type="button" class="symbol +" value="+">+</button><br>
                <button type="button" class="equals =">=</button>
        </div>
    </div>

<!--script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="script.js"></script-->
</body>
</html>

Upvotes: 1

madalinivascu
madalinivascu

Reputation: 32354

Use first() to get the first or eq() to get the element at postion x[0,length-1]

$(this).closest(button).find(".answer").first();

Upvotes: 0

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

It is not mandatory to use ul, li.

Refer this example to understand the dom traverse. 

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
    $(document).ready(function(){
        //console.log($('.fourth').parent().attr('class'));

        //console.log($('.fourth').closest('.second').html());

        //console.log($('#d1').find('span').html());

        //console.log($('#d1').next('p').html());
    });
    </script>
</head>
<body>
    <div class="first">
      <div class="second">
        <div class="third">
          <div class="fourth"></div>
        </div>
    </div>

    <div id="d1">
        <span>1</span>
    </div>
    <p>Paragraph</p>
    <div id="d2">
        <span>2</span>
    </div>
    <div id="d3">
        <span>3</span>
    </div>
</div>
</body>
</html>

remove the commented console.log() one by one and understand the process.

Upvotes: 0

Related Questions