Reorder Element value after Array Index change

Question

var array = [];
$('input').click(function(){
  var value = this.value;
  if (array.indexOf(value) > -1) {
    array.splice(array.indexOf(value));
    $(this).next('span').html('');
    return false;
  }
  array.push(value);
  $(this).next('span').html(array.indexOf(value));
  
})

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

<div>
  <input type='button' value="x">
  <span></span>
</div>
<div>
  <input type='button' value="y">
  <span></span>
</div>

In my Script here, I insert the index in the next span after input, So when you click x you get 0 and When you click y you get 1 and viceversa, The problem is When I click again on x which has index = 0,

What I expect is for the span of y to change to 0 instead of 1 since the key place changed after removing x index,

But that doesn't happen and the span stays 1 But if clicked it again, It changes to 0, How do I fix this problem?

EDIT: Added jQuery tag

It doesn't look like you ever tell the span after y to change it's text. You are only ever telling the spans after the clicked input to change. If you want both to update, you'll need to update both. — TheCrzyMan
– TheCrzyMan, Commented Mar 6, 2018 at 21:50
@TheCrzyMan Yes, That what I want to achieve but don't know how to make it dynamically. — Toleo
– Toleo, Commented Mar 6, 2018 at 21:54

TheCrzyMan · Accepted Answer · 2018-03-06 22:15:49Z

Here's my go at updating everything using JQuery. Something to note is that the splice function actually takes more arguments than just the index. If you don't supply the length parameter, it will delete everything in the array after the index.

var array = [];

$('input').click(function(){
  var value = this.value
  var result = true;
  var i = array.indexOf(value);
  if (i > -1) {
    array.splice(i, 1);
    result = false;
  } else {
    array.push(value);
    
  }
  updateSpans();
  return result;
})

function updateSpans(){
    $("input").each( function(){
      	var i = array.indexOf(this.value);
        var newHTML = i;
        if (i == -1){
  	    	newHTML = "";
        }
        $(this).next('span').html(newHTML);
  });
}

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

<div>
  <input type='button' value="x">
  <span></span>
</div>
<div>
  <input type='button' value="y">
  <span></span>
</div>

Leotrin Elmazi · Accepted Answer · 2018-03-06 22:17:05Z

1

You should give an ID to span elements to relate the buttons value with span elements, than you should only delete the element from array and not break the function. Each time you click the button the content of span elements will be delete and created again, for each element that exist in array.

var array = [];
$('input').click(function(){
  var value = this.value;
    if (array.indexOf(value) > -1) {
      array.splice(array.indexOf(value),1);
    }else{
      array.push(value);
    }

  $('span').html('');
  $.each(array, function(i, item){
    $('#'+item).html(array.indexOf(item));
  });

  
})

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

<input type='button' value="x">
<span id="x"></span>
<input type='button' value="y">
<span id="y"></span>

answered Mar 6, 2018 at 22:17

Leotrin Elmazi

233 silver badges5 bronze badges

1 Comment

Toleo Over a year ago

Pretty simple to be used, But the updated HTML construct doesn't apply on it correctly.

Doug · Accepted Answer · 2018-03-07 02:33:13Z

0

I created an outside function called 'updateDisplays' that will dynamically populate the spans as your array list changes...

// Make array[] global so that it can change across all the code
var array = [];

// bind all input elements (TODO: narrow input to specific type
// and/or class name) to a click event
$('input').click(function(){
  // get the value of the input button
  var value = this.value;
  // test if the input's value already exists in the global 
  // array[]
  var i = array.indexOf(value);
  // if the element does already exist in the array[]...
  if (i > -1) {
    // remove it
    array.splice(i, 1);
  }else{
    // if it is not in the array, add it 
    array.push(value);
  }
  
  // update the display output... 
  updateDisplays(array);
})

function updateDisplays(array){
  // cycle through each button that exists on the page
  $('input[type="button"]').each( function(){
    // find if the value of the button exists in the array[]
    var index = array.indexOf( $(this).attr('value') );
    
    // ternary condition to set the value for 'output'
    // if the index is less than zero -- the value does not 
    // exist in the array; so the string value is empty
    // if the index is greater than or equal to zero --
    // the value does exist in the array, so the string value
    // is the text conversion of the index number
    var output = (index < 0 )? '' : index.toString();
    // ^not totaly nessecary to convert a number to a string
    // in JavaScript/HTML -- it's just a nice coding convention
    // to follow.
    // update the neighboring span of the button with 'output'
    $(this).next('span').html( output );
  });
}

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

<div>
  <input type='button' value="w">
  <span></span>
</div>
<div>
  <input type='button' value="x">
  <span></span>
</div>
<div>
  <input type='button' value="y">
  <span></span>
</div>
<div>
  <input type='button' value="z">
  <span></span>
</div>

edited Mar 7, 2018 at 2:33

answered Mar 6, 2018 at 21:50

Doug

1,5251 gold badge14 silver badges27 bronze badges

5 Comments

Toleo Over a year ago

Not exactly, I want to update each span with its input index in the array, For example: x=0, y=1, If I clicked on x again, I expect the result to become y=0 and x is gone.

Doug Over a year ago

Updated code -- let me know if I'm getting closer :)

Toleo Over a year ago

a Little, I'm supposed to remove the index from the array when I click it again, But now it just changes its order, Same goes to the unindexed value at first, It gives the span a value of -1, But I want the span empty if its input value doesn't exist in the array.

zer00ne Over a year ago

@Toleo -1 is the value of an empty array. When an array no longer has any elements it's value is -1 and it still exists as arr = [ ]

Doug Over a year ago

Another update! :) So, here I put in some if/else logic. If on click the element already exists in the array, just remove it. Else add the new element to the array. Same with the output value, if the index is greater than 0 print it out, otherwise print nothing.

Collectives™ on Stack Overflow

Reorder Element value after Array Index change

3 Answers 3

Comments

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related