Two identical elements needing to do the same function, but are conflicting

Question

So I have a plus/minus divs, which, when the buttons are clicked, will either add or subtract a value. My issue is that when I place two of these on a page, they conflict with each other.

How can I adjust these so that they won't conflict?

You can see the working code here: http://codepen.io/maudulus/pen/yjnHv

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css.css">
    <script type="text/javascript" src="main.js"></script>
</head>
<div class="doors">
  <div class="miniDoor left">-</div>
  <input id="middle" placeholder="0"/>
  <div class="miniDoor right">+</div>
</div>
<br><br><br><br><br><br><br>
<div class="doors">
  <div class="miniDoor left">-</div>
  <input id="middle" placeholder="0"/>
  <div class="miniDoor right">+</div>
</div>

$(function(){
    $('.left').on('click',function() {
        subtractInputValue(this)
    });

    $('.right').on('click',function() {
        addInputValue(this)
    });
});

function addInputValue(thisDiv) {
    inputVal = $(thisDiv).parent().children('input').val()
    if (inputVal == "") {
        $(thisDiv).parent().children('input').val(1)
    } else {
        $('#middle').val(eval(inputVal) +1)
    }
}

function subtractInputValue(thisDiv) {
    inputVal = $(thisDiv).parent().children('input').val()
    if (inputVal == "") {
        $(thisDiv).parent().children('input').val(-1)
    } else {
        $('#middle').val(eval(inputVal) -1)
    }
}

eval(inputVal) is bad bad bad. There are plenty of ways to convert a string to a number. parseInt, parseFloat, number, urnary plus, etc. — epascarello, Nov 06 '14 at 01:11

score 5 · Accepted Answer · edited May 23 '17 at 11:58

You are using #middle as an ID in two places, the IDs need to be unique (I updated the IDs to something unique, they are arbitrary). So, jQuery finds the first ID it sees and updates it, that is why the top one gets updated when you click the bottom one. A simple fix is to use $(thisDiv).parent().children('input') when you want to update the value. That way you ensure you find the proper input to update.

Here is a working codepen that I forked of your original.

Also, you should not be using eval. There are better ways to convert a string into an int. Here is a good explanation as to why eval is a bad idea.

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css.css">
    <script type="text/javascript" src="main.js"></script>
</head>
<div class="doors">
  <div class="miniDoor left">-</div>
  <input id="middle1" placeholder="0"/>
  <div class="miniDoor right">+</div>
</div>
<br><br><br><br><br><br><br>
<div class="doors">
  <div class="miniDoor left">-</div>
  <input id="middle2" placeholder="0"/>
  <div class="miniDoor right">+</div>
</div>

$(function(){
    $('.left').on('click',function() {
        subtractInputValue(this)
    });

    $('.right').on('click',function() {
        addInputValue(this)
    });
});

function addInputValue(thisDiv) {
    inputVal = $(thisDiv).parent().children('input').val()
    if (inputVal == "") {
        $(thisDiv).parent().children('input').val(1)
    } else {
        $(thisDiv).parent().children('input').val(eval(inputVal) +1) // change it here
    }
}

score 1 · Answer 2 · answered Nov 06 '14 at 09:57

To extend tokyovariable's answer

The easiest way to find the input element would be:

$(thisDiv).closest('.doors').find(':input');

and forget about eval. You can use $.isNumeric to check if it's a number.

This is a simplified version:

$(function(){ $('.left').on('click',function() { calculateValue(this, -1, -1); });

$('.right').on('click',function() {
    calculateValue(this, +1, 1);
});

});

function getInput(thisDiv) { return ($(thisDiv).closest('.doors').find(':input')); }

function calculateValue(thisDiv, op, defaultValue) { var elem = getInput(thisDiv); var value = elem.val(); elem.val(!$.isNumeric(value) ? defaultValue : (parseInt(value) + op) ); }

$(function(){
 $('.left').on('click',function() {
  calculateValue(this, -1, -1);
 });

 $('.right').on('click',function() {
  calculateValue(this, +1, 1);
 });
});

function getInput(thisDiv)
{
  return ($(thisDiv).closest('.doors').find(':input'));
}

function calculateValue(thisDiv, op, defaultValue)
{
  var elem = getInput(thisDiv);
  var value = elem.val();
  elem.val(!$.isNumeric(value) ? defaultValue : (parseInt(value) + op) );
}

.miniDoor {
  font-style: bold;
  height:30px;
  width:30px;
  background:#333;
  padding:10px;
  font-size:20px;
  text-align:center;
  color:#fff;
  line-height:1.5em;
 /* transition: all .3s ease-in-out;*/
  transition:all .3s;
  transition-timing-function: cubic-bezier(0,0,0,1);
  transform-style: preserve-3d;
  float:left;
}

.miniDoor.right {
    -webkit-transition: background .7s;
    -moz-transition: background .7s;
    transition: background .7s;
}

.miniDoor.right:hover {
  background: #6B6A6A;
  background: rgba(107, 106, 106, 0.8);
  -webkit-transform: scale(0.93);
  -moz-transform: scale(0.93);
  -ms-transform: scale(0.93);
  transform: scale(0.93);
  color: #fff;
}

.miniDoor.left {
    -webkit-transition: background .7s;
    -moz-transition: background .7s;
    transition: background .7s;
}

.miniDoor.left:hover {
  background: #6B6A6A;
  background: rgba(107, 106, 106, 0.8);
  -webkit-transform: scale(0.93);
  -moz-transform: scale(0.93);
  -ms-transform: scale(0.93);
  transform: scale(0.93);
  color: #fff;
}

#middle1, #middle2{
  border:0;
  height:50px;
  width:75px;
  background:#333;
  padding:10px;
  font-size:20px;
  text-align:center;
  color:#fff;
  line-height:1.5em;
 /* transition: all .3s ease-in-out;*/
  transition:all .3s;
  transition-timing-function: cubic-bezier(0,0,0,1);
  transform-style: preserve-3d;
  float:left;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="doors">
  <div class="miniDoor left">-</div>
  <input id="middle1" placeholder="0"/>
  <div class="miniDoor right">+</div>
</div>
<br><br><br><br><br><br><br>
<div class="doors">
  <div class="miniDoor left">-</div>
  <input id="middle2" placeholder="0"/>
  <div class="miniDoor right">+</div>
</div>

Did not know about $.isNumeric, nice! – tokyovariable Nov 10 '14 at 02:35 — tokyovariable, Nov 10 '14 at 02:35

Two identical elements needing to do the same function, but are conflicting

2 Answers2