Correct use of Javascript map function [duplicate]

Question

I am trying to use map function in my code, but I am afraid that I am making some silly mistakes. It just does not work!

Here is my code. I have 2 buttons captioned "ID" and "Text". Clicking them should show the list of IDs and texts of the input field. The program works fine until the map.

Can you Gurus help me understand my mistake?

<!DOCTYPE html>
<html>
    <head>
        <script>
            getID = (x) => x.id;
            getText = (x) => x.value;
            function Click(x) {
                input = document.getElementsByTagName("input");
                alert(input.map((x.id == "id") ? getID : getText));
            }
        </script>
    </head>
    <body>
        <input type="input" id="input1"> </input>
        <input type="input" id="input2"> </input>
        <button id="id" onclick="Click(this)"> ID </button>
        <button id="text" onclick="Click(this)"> Text </button>
    </body>
</html>

@AndyRay Did you mean input.map(i => x.id === "id" ? getID(i) : getText(i)), not shadowing the x which refers to the button? Which would actually work the same as what the OP has already. — Bergi
– Bergi, Commented Apr 1, 2024 at 4:22

Nick Parsons · Accepted Answer · 2024-04-01 04:21:55Z

The .map() method is part of the Array.prototype which allows you to use it on arrays, however, input in your case is not an array, it's a HTMLCollection (as that's what getElementsByTagName returns). You could convert the HTMLCollection to an array using the spread syntax const inputArray = [...input];, or using const inputArray = Array.from(input) and once converted perform your mapping with .map(), however, it would be more efficient to use the second argument of Array.from() to perform your mapping while converting (this avoids two iterations over your collection):

const input = document.getElementsByTagName("input");
alert(Array.from(input, (x.id == "id") ? getID : getText));

On a side note, you should declare getID and getText with const or let to scope them to your current script and to avoid making them global. The same idea applies to input, declare this with const/let/var to keep it scoped to your function where it's declared:

const getID = (x) => x.id;
const getText = (x) => x.value;

function Click(x) {
  const input = document.getElementsByTagName("input");
  alert(Array.from(input, (x.id == "id") ? getID : getText));
}

<input type="input" id="input1"> </input>
<input type="input" id="input2"> </input>
<button id="id" onclick="Click(this)"> ID </button>
<button id="text" onclick="Click(this)"> Text </button>

Collectives™ on Stack Overflow

Correct use of Javascript map function [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related