Finish every non-empty last "items" of every "blocks" with a point instead of a comma

Question

I've a code where the user generate some text by checking some radios. I would like to finish every "blocks" of "items" by a point instead of a comma.

So I've made this snippet for an exemple of my code :

document.addEventListener("change", comma);
function points(item){
    item.innerHTML = item.innerHTML.replace(",", ".");
}
function commas(item){
    item.innerHTML = item.innerHTML.replace(".", ",");
}
function comma(){
  document.querySelectorAll('.blocks .items').forEach(commas);
    document.querySelectorAll('.blocks .items:not(:empty):last-child').forEach(points);
}

function person(x){
let name = document.getElementById("name"+x+"").value;
let hobby = document.querySelector("input[name=hobby"+x+"]:checked").value;
let color = document.querySelector("input[name=color"+x+"]:checked").value;
    if(name !== ""){
  document.getElementById("nameOf"+x+"").innerHTML = name + ", ";
    document.getElementById("hobbyOf"+x+"").innerHTML = hobby;
    document.getElementById("colorOf"+x+"").innerHTML = color;
  } else{
  document.getElementById("nameOf"+x+"").innerHTML = name;
    document.getElementById("hobbyOf"+x+"").innerHTML = hobby;
    document.getElementById("colorOf"+x+"").innerHTML = color;
  }
}

.containerEdit{
    border : solid black 1px;
    border-radius : 4px;
    padding: 10px;
    margin: 10px 0;
  }

<div calss="block"><b>First person</b>
  <div class="item">Name :
    <input id="nameP1" onchange="person('P1')"/>
  </div>
  <div class="item">Hobby : 
    <input type="radio" name="hobbyP1" id="basketballP1" onchange="person('P1')" value="basketball, ">
    <label for="basketballP1">basketball</label>
    <input type="radio" name="hobbyP1" id="footballP1" onchange="person('P1')" value="football, ">
    <label for="footballP1">football</label>
    <input type="radio" name="hobbyP1" id="handballP1" onchange="person('P1')" value="basketball, ">
    <label for="handballP1">handball</label>
    <input type="radio" name="hobbyP1" id="noHobbyP1" onchange="person('P1')" value="" checked="checked">
    <label for="noneP1">none</label>
  </div>
  <div class="item">Favorit color
    <input type="radio" name="colorP1" id="blueP1" onchange="person('P1')" value="blue, ">
    <label for="blueP1">blue</label>
    <input type="radio" name="colorP1" id="greenP1" onchange="person('P1')" value="green, ">
    <label for="greenP1">green</label>
    <input type="radio" name="colorP1" id="redP1" onchange="person('P1')" value="red, ">
    <label for="redP1">red</label>
    <input type="radio" name="colorP1" id="noColorP1" onchange="person('P1')" value="" checked="checked">
    <label for="noneP1">none</label>
  </div>
  <br/>
</div>

<div calss="block"><b>Second person</b>
  <div class="item">Name :
    <input id="nameP2" onchange="person('P2')"/>
  </div>
  <div class="item">Hobby : 
    <input type="radio" name="hobbyP2" id="basketballP2" onchange="person('P2')" value="basketball, ">
    <label for="basketballP2">basketball</label>
    <input type="radio" name="hobbyP2" id="footballP2" onchange="person('P2')" value="football, ">
    <label for="footballP2">football</label>
    <input type="radio" name="hobbyP2" id="handballP2" onchange="person('P2')" value="basketball, ">
    <label for="handballP2">handball</label>
    <input type="radio" name="hobbyP2" id="noHobbyP2" onchange="person('P2')" value="" checked="checked">
    <label for="noneP2">none</label>
  </div>
  <div class="item">Favorit color
    <input type="radio" name="colorP2" id="blueP2" onchange="person('P2')" value="blue, ">
    <label for="blueP2">blue</label>
    <input type="radio" name="colorP2" id="greenP2" onchange="person('P2')" value="green, ">
    <label for="greenP2">green</label>
    <input type="radio" name="colorP2" id="redP2" onchange="person('P2')" value="red, ">
    <label for="redP2">red</label>
    <input type="radio" name="colorP2" id="noColorP2" onchange="person('P2')" value="" checked="checked">
    <label for="noneP2">none</label>
  </div>
  <br/>
</div>

<div calss="block"><b>Third person</b>
  <div class="item">Name :
    <input id="nameP3" onchange="person('P3')"/>
  </div>
  <div class="item">Hobby : 
    <input type="radio" name="hobbyP3" id="basketballP3" onchange="person('P3')" value="basketball, ">
    <label for="basketballP3">basketball</label>
    <input type="radio" name="hobbyP3" id="footballP3" onchange="person('P3')" value="football, ">
    <label for="footballP3">football</label>
    <input type="radio" name="hobbyP3" id="handballP3" onchange="person('P3')" value="basketball, ">
    <label for="handballP3">handball</label>
    <input type="radio" name="hobbyP3" id="noHobbyP3" onchange="person('P3')" value="" checked="checked">
    <label for="noneP3">none</label>
  </div>
  <div class="item">Favorit color
    <input type="radio" name="colorP3" id="blueP3" onchange="person('P3')" value="blue, ">
    <label for="blueP3">blue</label>
    <input type="radio" name="colorP3" id="greenP3" onchange="person('P3')" value="green, ">
    <label for="greenP3">green</label>
    <input type="radio" name="colorP3" id="redP3" onchange="person('P3')" value="red, ">
    <label for="redP3">red</label>
    <input type="radio" name="colorP3" id="noColorP3" onchange="person('P3')" value="" checked="checked">
    <label for="noneP3">none</label>
  </div>
  <br/>
</div>

<div class="containerEdit" contenteditable="true">
  <b>Descitpion of the persons (you can edit this text) :</b>
  <div class="blocks" id="block1">
    <span class="items" id="nameOfP1"></span>
    <span class="items" id="hobbyOfP1"></span>
    <span class="items" id="colorOfP1"></span>
  </div>
  <div class="blocks" id="block2">
    <span class="items" id="nameOfP2"></span>
    <span class="items" id="hobbyOfP2"></span>
    <span class="items" id="colorOfP2"></span>
  </div>
  <div class="blocks" id="block3">
    <span class="items" id="nameOfP3"></span>
    <span class="items" id="hobbyOfP3"></span>
    <span class="items" id="colorOfP3"></span>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

The problem is that my function changes the last "item" of each "block" even if the last child is empty :/

I'd like to change every last NONE EMPTY "item" of each "block" :) Any ideas of how I could achieve it ?

Thanks for the time you take to help me :)

Answer 1

Personally I would add none in the empty places. Is this what you want?

  function person(x) {
    let items = [];
    let name = document.getElementById("name" + x).value;
    items.push(name);
    items.push(document.querySelector("input[name=hobby" + x + "]:checked").value);
    items.push(document.querySelector("input[name=color" + x + "]:checked").value);

    if (name !== "") {
      const results = items.filter((element) => {
        return element !== "";
      });
      document.getElementById("block" + x.slice(1, 2)).innerHTML = results.join(", ") + ".";
    }
  }

.containerEdit{
    border : solid black 1px;
    border-radius : 4px;
    padding: 10px;
    margin: 10px 0;
  }

    <div calss="block">
  <b>First person</b>
  <div class="item">
    Name :
    <input id="nameP1" class="pers" onchange="person('P1')" />
  </div>
  <div class="item">
    Hobby :
    <input type="radio" name="hobbyP1" id="basketballP1" onchange="person('P1')" value="basketball" />
    <label for="basketballP1">basketball</label>
    <input type="radio" name="hobbyP1" id="footballP1" onchange="person('P1')" value="football" />
    <label for="footballP1">football</label>
    <input type="radio" name="hobbyP1" id="handballP1" onchange="person('P1')" value="basketball" />
    <label for="handballP1">handball</label>
    <input type="radio" name="hobbyP1" id="noHobbyP1" onchange="person('P1')" value="" checked="checked" />
    <label for="noneP1">none</label>
  </div>
  <div class="item">
    Favorit color
    <input type="radio" name="colorP1" id="blueP1" onchange="person('P1')" value="blue" />
    <label for="blueP1">blue</label>
    <input type="radio" name="colorP1" id="greenP1" onchange="person('P1')" value="green" />
    <label for="greenP1">green</label>
    <input type="radio" name="colorP1" id="redP1" onchange="person('P1')" value="red" />
    <label for="redP1">red</label>
    <input type="radio" name="colorP1" id="noColorP1" onchange="person('P1')" value="" checked="checked" />
    <label for="noneP1">none</label>
  </div>
  <br />
</div>

<div calss="block">
  <b>Second person</b>
  <div class="item">
    Name :
    <input id="nameP2" class="pers" onchange="person('P2')" />
  </div>
  <div class="item">
    Hobby :
    <input type="radio" name="hobbyP2" id="basketballP2" onchange="person('P2')" value="basketball" />
    <label for="basketballP2">basketball</label>
    <input type="radio" name="hobbyP2" id="footballP2" onchange="person('P2')" value="football" />
    <label for="footballP2">football</label>
    <input type="radio" name="hobbyP2" id="handballP2" onchange="person('P2')" value="basketball" />
    <label for="handballP2">handball</label>
    <input type="radio" name="hobbyP2" id="noHobbyP2" onchange="person('P2')" value="" checked="checked" />
    <label for="noneP2">none</label>
  </div>
  <div class="item">
    Favorit color
    <input type="radio" name="colorP2" id="blueP2" onchange="person('P2')" value="blue" />
    <label for="blueP2">blue</label>
    <input type="radio" name="colorP2" id="greenP2" onchange="person('P2')" value="green" />
    <label for="greenP2">green</label>
    <input type="radio" name="colorP2" id="redP2" onchange="person('P2')" value="red" />
    <label for="redP2">red</label>
    <input type="radio" name="colorP2" id="noColorP2" onchange="person('P2')" value="" checked="checked" />
    <label for="noneP2">none</label>
  </div>
  <br />
</div>

<div calss="block">
  <b>Third person</b>
  <div class="item">
    Name :
    <input id="nameP3" class="pers" onchange="person('P3')" />
  </div>
  <div class="item">
    Hobby :
    <input type="radio" name="hobbyP3" id="basketballP3" onchange="person('P3')" value="basketball" />
    <label for="basketballP3">basketball</label>
    <input type="radio" name="hobbyP3" id="footballP3" onchange="person('P3')" value="football" />
    <label for="footballP3">football</label>
    <input type="radio" name="hobbyP3" id="handballP3" onchange="person('P3')" value="basketball" />
    <label for="handballP3">handball</label>
    <input type="radio" name="hobbyP3" id="noHobbyP3" onchange="person('P3')" value="" checked="checked" />
    <label for="noneP3">none</label>
  </div>
  <div class="item">
    Favorit color
    <input type="radio" name="colorP3" id="blueP3" onchange="person('P3')" value="blue" />
    <label for="blueP3">blue</label>
    <input type="radio" name="colorP3" id="greenP3" onchange="person('P3')" value="green" />
    <label for="greenP3">green</label>
    <input type="radio" name="colorP3" id="redP3" onchange="person('P3')" value="red" />
    <label for="redP3">red</label>
    <input type="radio" name="colorP3" id="noColorP3" onchange="person('P3')" value="" checked="checked" />
    <label for="noneP3">none</label>
  </div>
  <br />
</div>

<div class="containerEdit" contenteditable="true">
  <b>Descitpion of the persons (you can edit this text) :</b>
  <div class="blocks" id="block1">
  </div>
  <div class="blocks" id="block2">
  </div>
  <div class="blocks" id="block3">
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>