How do I only display the newest added element of an array from an input field-CodePudding

I am writing a program which is meant to allow you to add parts to a queue, and then display the parts in a separate div tag. I only want to display the newest added item from the array so that the user can see exactly what part they are working with.

I have already tried setting the part display to only show a particular index such as [0]. But that is only the first index of the array and will not be overwritten by any newly added item.

Here is my code for those who are interested.

    var p = "";
    
    let parts = [{
    "Type": "gear",
    "Width": 2,
    "Length": 5,
    "Thickness": 2
    },  
    {
    "Type": "screw",
    "Width": 2,
    "Length": 1,
    "Thickness": 1
    },  
    {
    "Type": "tube",
    "Width": 3,
    "Length": 8,
    "Thickness": 2
    },  
   {
   "type": "socket",
    "Width": 10,
    "Length": 3,
    "Thickness": 5
    }]; 
    
let queue = [];
function queuePart() {
p = document.getElementById("parts").value;
queue.push(p);
//Display items added to queue.
document.getElementById("arr").innerHTML = queue;
if (queue.length > 4) {
queue.shift();
}
//Display newest added item to queue in parts display.
document.getElementById("disp").innerHTML = queue[0];
}

let compPart = [];
function completePart() {
p = document.getElementById("parts").value;
compPart.push(p);
queue.shift();
//Display the first few completed parts from queue.
document.getElementById("compDisp").innerHTML = compPart;


function removeAllText(element) {

   
    var nodes = element.childNodes;

    for(var i = 0; i < nodes.length; i  ) {

        var node = nodes[i];

        
        if(node.nodeType == Node.TEXT_NODE) {

            node.parentNode.removeChild(node);


            i--; 

        } else

        
        if(node.nodeType == Node.ELEMENT_NODE) {

            removeAllText(node);

        }
    }
}
var disp = document.getElementById("disp");
removeAllText(disp);
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Machine Web UI</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>        
    </div>
    <div  id="screen1">
      <h1>Queue Area</h1>
      <pre id="arr">Currently No Parts In Queue</pre>
      <input type ="text" id ="parts"></input>
      <button type="button" onclick="queuePart()"> Add a Part </button>
    </div>
    <div  id="screen2">
      <h1>Part Display Area</h1>
      <pre id="disp"></pre>
<button type="button" onclick="completePart()"> Complete Part </button>   
    </div> 
    <div  id="screen3">
      <h1>Completed Parts Area</h1>
      <pre id="compDisp">Currently no parts completed</pre>
    </div>
    <div  id="screen4">
      <h1>Log Area</h1> 
      <pre id="logList"> </pre>
    </div>
    <script>
  </script>
 </body>
</html>

Thank you for any help.

CodePudding user response：

Assuming you are trying to ONLY display the last item in your array stack in the Parts Display section, you can use arr.length-1 to get the last item regardless of the length of the array.

NOTE: Keep in mind, if you are adding your items to the front of the array using unshift then simply getting the first item using array[0] would work. However, since you are using .push(), which adds the item to the end, you need to get the last item added using arr.length-1

Let me know if this is not what your looking for and I can edit or remove this answer.

var p = "";

let parts = [{
    "Type": "gear",
    "Width": 2,
    "Length": 5,
    "Thickness": 2
  },
  {
    "Type": "screw",
    "Width": 2,
    "Length": 1,
    "Thickness": 1
  },
  {
    "Type": "tube",
    "Width": 3,
    "Length": 8,
    "Thickness": 2
  },
  {
    "type": "socket",
    "Width": 10,
    "Length": 3,
    "Thickness": 5
  }
];

let queue = [];

function queuePart() {
  p = document.getElementById("parts").value;
  queue.push(p);
  //Display items added to queue.
  document.getElementById("arr").innerHTML = queue;
  if (queue.length > 4) {
    queue.shift();
  }
  //Display newest added item to queue in parts display.
  document.getElementById("disp").innerHTML = queue[queue.length - 1];
}

let compPart = [];

function completePart() {
  p = document.getElementById("parts").value;
  compPart.push(p);
  queue.shift();
  //Display the first few completed parts from queue.
  document.getElementById("compDisp").innerHTML = compPart;


  function removeAllText(element) {


    var nodes = element.childNodes;

    for (var i = 0; i < nodes.length; i  ) {

      var node = nodes[i];


      if (node.nodeType == Node.TEXT_NODE) {

        node.parentNode.removeChild(node);


        i--;

      } else


      if (node.nodeType == Node.ELEMENT_NODE) {

        removeAllText(node);

      }
    }
  }
  var disp = document.getElementById("disp");
  removeAllText(disp);
}

<div  id="screen1">
  <h1>Queue Area</h1>
  <pre id="arr">Currently No Parts In Queue</pre>
  <input type="text" id="parts"></input>
  <button type="button" onclick="queuePart()"> Add a Part </button>
</div>
<div  id="screen2">
  <h1>Part Display Area</h1>
  <pre id="disp"></pre>
  <button type="button" onclick="completePart()"> Complete Part </button>
</div>
<div  id="screen3">
  <h1>Completed Parts Area</h1>
  <pre id="compDisp">Currently no parts completed</pre>
</div>
<div  id="screen4">
  <h1>Log Area</h1>
  <pre id="logList"> </pre>
</div>

CodePudding user response：

Accessing latest item in array

You can get the latest item in an array, by accessing the length and subtracting 1 (since indexes are 0-based).

queue[queue.length-1];

or you can use the at function with a negative index. more info

queue.at(-1);

Removing latest item in array

If you want to remove the last element of an array you can do it with the pop method. more info

queue.pop();

Side notes

I improved your snippet formatting. You can save references to html elements in constants, instead of using document.getElementById all the time.

const partsInput = document.getElementById("parts");

Snippet

I took liberties that hopefully align with what you want to achieve.

The input gets cleared after getting added, and it automatically takes focus.
I removed the removeAllText function since I did not find it useful you can clear text by just adding a new value or innerHtml of empty string.

var p = "";

let parts = [{
    "Type": "gear",
    "Width": 2,
    "Length": 5,
    "Thickness": 2
  },
  {
    "Type": "screw",
    "Width": 2,
    "Length": 1,
    "Thickness": 1
  },
  {
    "Type": "tube",
    "Width": 3,
    "Length": 8,
    "Thickness": 2
  },
  {
    "type": "socket",
    "Width": 10,
    "Length": 3,
    "Thickness": 5
  }
];

let queue = [];
let compPart = [];

const partsInput = document.getElementById("parts");
const arrDisplay = document.getElementById("arr");
const completeDisplay = document.getElementById("compDisp");
const newestDisplay = document.getElementById("disp");


function queuePart() {
  queue.push(partsInput.value);
  partsInput.value = ''; //Clear input when added
  partsInput.focus(); //Focuses input
  if (queue.length > 4) {
    queue.shift();
  }
  arrDisplay.innerHTML = queue;
  newestDisplay.innerHTML = queue.at(-1); //Or queue[queue.length-1];
}

function completePart() {
  if (queue.length == 0) return; //Do nothing if queue is empty
  
  compPart.push(queue.pop());
  completeDisplay.innerHTML = compPart;
  arrDisplay.innerHTML = queue;

  if (queue.length > 0) {
    newestDisplay.innerHTML = queue.at(-1); //Or queue[queue.length-1];
  } else {
    newestDisplay.innerHTML = 'Currently No Parts In Queue';
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Machine Web UI</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div  id="screen1">
    <h1>Queue Area</h1>
    <pre id="arr">Currently No Parts In Queue</pre>
    <input type="text" id="parts"></input>
    <button type="button" onclick="queuePart()"> Add a Part </button>
  </div>
  <div  id="screen2">
    <h1>Part Display Area</h1>
    <pre id="disp"></pre>
    <button type="button" onclick="completePart()"> Complete Part </button>
  </div>
  <div  id="screen3">
    <h1>Completed Parts Area</h1>
    <pre id="compDisp">Currently no parts completed</pre>
  </div>
  <div  id="screen4">
    <h1>Log Area</h1>
    <pre id="logList"> </pre>
  </div>
  <script>
  </script>
</body>

</html>