JavaScript map(function) return this.value - finding the last element in the array

Question

Following the previous query:

Javascript - map(function) return this.value - comma on wrong side

I have one of the elements, which I would like to have distinguished. Namely, I want the " - " element behind this object.

I found some solutions here:

Javascript Map Array Last Item

and tried to fiddle with my code, which unfortunately didn't work.

HTML:

      <fieldset id="ophealth_safety">
      <div>
      <input type="checkbox" id="opladdert" name="health_safety" value="Triple ladders">
      <label class="checking" for="opladder">Triple Ladders</label>
      </div>
      <div>
      <input type="checkbox" id="opgardens" name="health_safety" value="Access private gardens required">
      <label class="checking" for="opgardens">Access private gardens required</label>
      </div>
      <div>
      <input type="checkbox" id="opskylight" name="health_safety" value="Skylight">
      <label class="checking" for="opskylight">Skylight</label>
      </div>
      <div>
      <input type="checkbox" id="oploft" name="health_safety" value="Access Loft">
      <label class="checking" for="oploft">Access Loft</label>
      </div>
      <div>
      <input type="checkbox" id="oproof" name="health_safety" value="Access to roof">
      <label class="checking" for="oproof">Access to roof</label>
      </div>
      <div>
      <input type="checkbox" id="opother" name="health_safety" value="Other">
                                                <label class="checking" for="opother">Other</label>
                                                <input type="text" id="opotherdesc" name="other" pattern="[A-Za-z].{4,}" title="The text should include at least 4 letters" placeholder="Please specify">
                                            </div>
                                        </fieldset>

JAVASCRIPT:

    var healthSafety = $('input:checkbox[name=health_safety]:checked').map(function() {
    const lastIndex = row.length - 1;
    row.map((rank, i) => {
        if (i === lastIndex) {
            .join(" - ")
        } else {
            return this.value;
            }).get().join(", ")
    });

I have currently:

HEALTH AND SAFETY: Access private gardens required, Access Loft, Other ceiling

and I want something like this:

HEALTH AND SAFETY: Access private gardens required, Access Loft, Other - ceiling

What is missing in my code?

Answer 1

I'm not sure I get your problem right, but I will try to help.

The first problem you would like to solve is to get a comma-separated list of values of checked checkboxes, which could be something like this:

 const selector = 'input[name="health_safety"]:checked'; const values = Object.values(document.querySelectorAll(selector)).map(input => input.value);

Now that you have your list, you want to check whether "Other" (last element) is available in the list. If yes, you want to append '-' followed by the value of the text input:

 let healthSafety = values.join(', ') + ( values[values.length - 1] === 'Other' ? ' - ' + document.getElementById('opotherdesc').value : '' );

https://jsfiddle.net/afe8otzn/3/