Slicing nodes within array

Question

When I first select two options from the 2nd select menu, the array becomes is populated with those two selections. What I want is for the second selected option to replace the first, so even if I do begin by selecting two options from the 2nd select menu, the array's length will remain at one, dynamically changing between those selections. I hope you understand. Thanks for any help. I know I could just make it one function and this problem wouldn't exist but for my use of it I can't do that.

var select1 = document.getElementById('select1');
var select2 = document.getElementById('select2');
var array = []
        
function myFunct1() { 
  var one = select1.options[select1.selectedIndex].value;
  array.splice(0, 1, one);
  console.log(array);
        }
        
function myFunct2() {
  var two = select2.options[select2.selectedIndex].value;
  array.splice(1, 1, two);
  console.log(array);
        }

<select id = 'select1' onchange = 'myFunct1()'>
        <option disabled selected value> -- select an option -- </option>
        <option value = 'Dog'>ONE</option>
        <option value = 'Cat'>TWO</option>
        <option value = 'Bear'>THREE</option>
        </select>
    
        
    <select id = 'select2' onchange = 'myFunct2()'>
        <option disabled selected value> -- select an option -- </option>
        <option value = 'Dog'>ONE</option>
        <option value = 'Cat'>TWO</option>
        <option value = 'Bear'>THREE</option>
        </select>

What would happen if array = ["One","Two"] and TWO is pressed. Array should change to ["Two","One"] or remain ["One","Two"] — Maheer Ali
– Maheer Ali, Commented Mar 8, 2019 at 3:18
You want array to remain. ["One","Two"] or change to this ["Two","One"]? — Maheer Ali
– Maheer Ali, Commented Mar 8, 2019 at 3:21

Maheer Ali · Accepted Answer · 2019-03-08 22:50:37Z

1

use Array.prototype.unshift() to add value at first place. You can check if element exists in array using includes().
And instead of creating two functions you can create same function and pass different parameters to it.

var array = [];
        
        function myFunct(val){ 
            if(!array.includes(val)) array.unshift(val);
            console.log(array);
        }

<button onclick = 'myFunct("One")'>ONE</button>
        <button onclick = 'myFunct("Two")'>TWO</button>

If you want to replace the new value with first value use this code

function myFunct(val) {
     array.unshift(val);
     array = [... new Set(array)];
     console.log(array); 
}

Update:

var select1 = document.getElementById('select1');
var select2 = document.getElementById('select2');
var array = [];
let sel1 = false;

function myFunct1() { 
  var one = select1.options[select1.selectedIndex].value;
  if(array.length === 1 && !sel1) array.unshift(one);
  else array.splice(0,1,one);
  console.log(array);
  sel1 = true;
}

function myFunct2() {
  var two = select2.options[select2.selectedIndex].value;
  array.splice(sel1, 1, two);
  console.log(array);
}

edited Mar 8, 2019 at 22:50

answered Mar 8, 2019 at 2:52

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Harper Creek Over a year ago

But what if instead of buttons that always push 'One' and 'Two' I'm using select menus that I want it to remember and replace the option from each select menu, but by this method it wouldn't replace unless you reclicked the same option.

Maheer Ali Over a year ago

@Harper Creek You didn't answered my question What would happen if array = ["One","Two"] and TWO is pressed. Array should change to ["Two","One"] or remain ["One","Two"]?

Harper Creek Over a year ago

I mean in the example it becomes ["Two","One"]? Are you asking if that matters for what I'm trying to do? I guess it doesn't. I may be more convenient if Two stays at the 1 spot.

Maheer Ali Over a year ago

@Harper Creek Ok now please edit your question what help you need more

Maheer Ali Over a year ago

@Harper Creek I have updated the code. Tell me if there is still some problem

|

Ehsan · Accepted Answer · 2019-03-08 03:14:15Z

1

Try This:

var array = [];
        
function myFunct() {
  if(array.indexOf('One') === -1 ) { array.unshift('One') ; }    
  console.log(array);
}
        
function myFunct2() {
  if(array.indexOf('Two') === -1 ) { array.push('Two') ; }
  console.log(array);
}

<button onclick = 'myFunct()'>ONE</button>
<button onclick = 'myFunct2()'>TWO</button>

answered Mar 8, 2019 at 3:14

Ehsan

13k3 gold badges27 silver badges46 bronze badges

Collectives™ on Stack Overflow

Slicing nodes within array

2 Answers 2

Update:

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update:

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related