CODEWITHSUNDEEP
javascriptjquerycss
maudulus
maudulus

Reputation: 11035

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

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)
    }
}

Upvotes: 0

Views: 162

Answers (2)

LeftyX
LeftyX

Reputation: 35587

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>

Upvotes: 1

tokyovariable
tokyovariable

Reputation: 1656

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
    }
}

Upvotes: 5

Related Questions