I can't figure out what's wrong with my code for back and forward buttons.

I want the:

Back button

• To remove the last element from array currentFolderFlow
• Add this element to the front of another array backFolders

Forward Button

• To add the last element of backFolders to currentFolderFlow
• Remove this element from backFolders

My code: (Somehow nothing happens when I click the back button)

<script>

let currentFolderFlow = ["Element 1", "Element 2", "Element 3", "Element 4"]
    let backFolders = []

const back = () => {
        const lastFolder = currentFolderFlow[currentFolderFlow.length - 1]
        backFolders = [...backFolders, lastFolder]
        currentFolderFlow = currentFolderFlow.slice(0, -1)
    }

    const forward = () => {
        const lastFolder = backFolders[backFolders.length - 1]
        currentFolderFlow = [...currentFolderFlow, lastFolder]
        backFolders = backFolders.slice(0, -1)
    }
</script>

<button  on:click={() => back()}>
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
                    <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
                </svg>
            </button>

            <button  on:click={() => forward()}>
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
                    <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
                </svg>
            </button>

CodePudding user response：

1. pop

   The pop() method removes the last element of an array.

2. push

   The push() method adds new items to the end of an array.

If you want to remove first element of array use

3. shift

   The shift() method removes the first item of an array.

let currentFolderFlow = ["Element 1", "Element 2", "Element 3", "Element 4"]
let backFolders = []

const back = () => {
  //adding last element of currentFolderFlow to first of backFolder
  backFolders = [currentFolderFlow[currentFolderFlow.length - 1], ...backFolders]
  // removing that element from currentFolderFlow
  currentFolderFlow.pop()
  console.log(backFolders, currentFolderFlow)
}

const forward = () => {
  //adding last element of backFolders to currentFolderFlow
  currentFolderFlow.push(backFolders[backFolders.length - 1])
  // removing that element from currentFolderFlow 
  backFolders.pop()
  console.log(backFolders, currentFolderFlow)
}

<button onclick="back()"> < back</button>
<button onclick="forward()"> forward ></button>

I think there is a logical mistake that you mentioned in forward. In forward, add the first element of backFolders to currentFolderFlow to get the original array. If you want like this, change forward function like following

let currentFolderFlow = ["Element 1", "Element 2", "Element 3", "Element 4"]
let backFolders = []

const back = () => {
  //adding last element of currentFolderFlow to first of backFolder
  backFolders = [currentFolderFlow[currentFolderFlow.length - 1], ...backFolders]
  // removing that element from currentFolderFlow
  currentFolderFlow.pop()
  console.log(backFolders, currentFolderFlow)
}

const forward = () => {
  //adding first element of backFolders to currentFolderFlow
  currentFolderFlow.push(backFolders[0])
  // removing that element from currentFolderFlow 
  backFolders.shift()
  console.log(backFolders, currentFolderFlow)
}

<button onclick="back()"> < back</button>
<button onclick="forward()"> forward ></button>

Add some more condition to buttons

1. Disable back button when currentFolderFlow is empty
2. Disable forward button when backFolders is empty

CodePudding user response：

You can try something like this

let array1 = ['item 1', 'item 2', 'item 3', 'item 4'];
let array2 = [];
console.log('--------Default---------');
console.log('Array 1 :', array1);
console.log('Array 2 :',array2);
const back = () =>{
    let item = array1.pop();
    array2.push(item);

    console.log('--------Back---------');
    console.log('Array 1 :', array1);
    console.log('Array 2 :',array2);
}

const forward = () => {
    let item = array2.pop();
    array1.push(item);
    console.log('--------Forward---------');
    console.log('Array 1 :',array1);
    console.log('Array 2 :',array2);
}
back();
forward();

Output:

--------Default---------
Array 1 : [ 'item 1', 'item 2', 'item 3', 'item 4' ]
Array 2 : []
--------Back---------
Array 1 : [ 'item 1', 'item 2', 'item 3' ]
Array 2 : [ 'item 4' ]
--------Forward---------
Array 1 : [ 'item 1', 'item 2', 'item 3', 'item 4' ]
Array 2 : []