Add information in contenteditable and generate stuff without loosing added infos-CodePudding

So I've created a list of radios where you can choose between 3 choices (cf. snippet) and then generate a report in a contenteditable area with the value of each radio.

It works fine, but I would like to be able to write text between the items and when you press again the button, only the items change but the added text stays. For the moment, when I generate the report, it deletes the added text (and it's normal because I change the string with id="itemXX" when I add text, but I can't find a way to make it work :/ ).

The ideal would be that each item could be changed individually and the added text stays.

Thanks for the help :)

let listA = ["A1", "A2"];
let listB = ["B1", "B2"];

function report() {
    for (i=0; i<listA.length; i  ){
    affichageRapport(listA[i]);
  }
    for (i=0; i<listB.length; i  ){
    affichageRapport(listB[i]);
  }
}

function affichageRapport (x){
    document.getElementById("item" x).innerHTML = document.querySelector("input[name=" x "]:checked").value;
    }

.containers{
  max-width : 500px;
}
.subContainers{
  margin-bottom:10px;
}
.tripleChoice {
    display: flex;
    overflow: hidden;
    float: right;
}
.tripleChoice input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
}
.tripleChoice label {
    color: rgba(0, 0, 0, 0.6);
    font-size: 12px;
    text-align: center;
    padding: 4px 8px;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
}
.tripleChoice label:hover {
    cursor: pointer;
    background-color: #F9F7F7;
}
.tripleChoice input:checked   label {
    background-color: #3F72AF;
    color: #F9F7F7;
}
.editable{
 border: solid black 1px;
 padding: 10px;
}

<div >
  <div ><strong>itemA1</strong>
    <div >
      <input id="yesA1" name="A1" type="radio" value="item A1 = yes,"/>
      <label for="yesA1">yes</label>
      <input id="noA1" name="A1" type="radio" value="item A1 = no,"/>
      <label for="noA1">no</label>
      <input id="NTA1" name="A1" type="radio" value="item A1 = NT," checked="checked"/>
      <label for="NTA1">NT</label>
    </div>
  </div>
  <div ><strong>itemA2</strong>
    <div >
      <input id="yesA2" name="A2" type="radio" value="item A2 = yes."/>
      <label for="yesA2">yes</label>
      <input id="noA2" name="A2" type="radio" value="item A2 = no."/>
      <label for="noA2">no</label>
      <input id="NTA2" name="A2" type="radio" value="item A2 = NT." checked="checked"/>
      <label for="NTA2">NT</label>
    </div>
  </div>
  <div ><strong>itemB1</strong>
    <div >
      <input id="yesB1" name="B1" type="radio" value="item B1 = yes,"/>
      <label for="yesB1">yes</label>
      <input id="noB1" name="B1" type="radio" value="item B1 = no,"/>
      <label for="noB1">no</label>
      <input id="NTB1" name="B1" type="radio" value="item B1 = NT," checked="checked"/>
      <label for="NTB1">NT</label>
    </div>
  </div>
  <div ><strong>itemB2</strong>
    <div >
      <input id="yesB2" name="B2" type="radio" value="item B2 = yes."/>
      <label for="yesB2">yes</label>
      <input id="noB2" name="B2" type="radio" value="item B2 = no."/>
      <label for="noB2">no</label>
      <input id="NTB2" name="B2" type="radio" value="item B2 = NT." checked="checked"/>
      <label for="NTB2">NT</label>
    </div>
  </div>
  <div >
    <button  onclick="report()">Create report</button>
  </div>
  <div  contenteditable="true">
    <div id="firstPart"/>
      <string id="itemA1"></string>
      <string id="itemA2"></string>
      <p/>
    </div>
    <div id="secondPart"/>
      <string id="itemB1"></string>
      <string id="itemB2"></string>
      <p/>
    </div>
  </div>
 </div>

CodePudding user response：

You can just move the editable part of the report to the line after the "form input lines". I highlighted them with a gray background. Now, the user an only edit these two lines.

let listA = ["A1", "A2"];
let listB = ["B1", "B2"];

function report() {
    for (i=0; i<listA.length; i  ){
    affichageRapport(listA[i]);
  }
    for (i=0; i<listB.length; i  ){
    affichageRapport(listB[i]);
  }
}

function affichageRapport (x){
    document.getElementById("item" x).innerHTML = document.querySelector("input[name=" x "]:checked").value;
    }

.containers{
  max-width : 500px;
}
.subContainers{
  margin-bottom:10px;
}
.tripleChoice {
    display: flex;
    overflow: hidden;
    float: right;
}
.tripleChoice input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
}
.tripleChoice label {
    color: rgba(0, 0, 0, 0.6);
    font-size: 12px;
    text-align: center;
    padding: 4px 8px;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
}
.tripleChoice label:hover {
    cursor: pointer;
    background-color: #F9F7F7;
}
.tripleChoice input:checked   label {
    background-color: #3F72AF;
    color: #F9F7F7;
}
.editable{
 border: solid black 1px;
 padding: 10px;
}

p[contenteditable], span[contenteditable] {
  background: #eee;
  padding: .2em;
  margin: 0;
}

<div >
  <div ><strong>itemA1</strong>
    <div >
      <input id="yesA1" name="A1" type="radio" value="item A1 = yes,"/>
      <label for="yesA1">yes</label>
      <input id="noA1" name="A1" type="radio" value="item A1 = no,"/>
      <label for="noA1">no</label>
      <input id="NTA1" name="A1" type="radio" value="item A1 = NT," checked="checked"/>
      <label for="NTA1">NT</label>
    </div>
  </div>
  <div ><strong>itemA2</strong>
    <div >
      <input id="yesA2" name="A2" type="radio" value="item A2 = yes."/>
      <label for="yesA2">yes</label>
      <input id="noA2" name="A2" type="radio" value="item A2 = no."/>
      <label for="noA2">no</label>
      <input id="NTA2" name="A2" type="radio" value="item A2 = NT." checked="checked"/>
      <label for="NTA2">NT</label>
    </div>
  </div>
  <div ><strong>itemB1</strong>
    <div >
      <input id="yesB1" name="B1" type="radio" value="item B1 = yes,"/>
      <label for="yesB1">yes</label>
      <input id="noB1" name="B1" type="radio" value="item B1 = no,"/>
      <label for="noB1">no</label>
      <input id="NTB1" name="B1" type="radio" value="item B1 = NT," checked="checked"/>
      <label for="NTB1">NT</label>
    </div>
  </div>
  <div ><strong>itemB2</strong>
    <div >
      <input id="yesB2" name="B2" type="radio" value="item B2 = yes."/>
      <label for="yesB2">yes</label>
      <input id="noB2" name="B2" type="radio" value="item B2 = no."/>
      <label for="noB2">no</label>
      <input id="NTB2" name="B2" type="radio" value="item B2 = NT." checked="checked"/>
      <label for="NTB2">NT</label>
    </div>
  </div>
  <div >
    <button  onclick="report()">Create report</button>
  </div>
  <div >
    <div id="firstPart"/>
      <span id="itemA1"></span>
      <span contenteditable="true"></span>
      <span id="itemA2"></span>
      <span contenteditable="true"></span>
      <p contenteditable="true"></p>
    </div>
    <div id="secondPart"/>
      <span id="itemB1"></span>
      <span contenteditable="true"></span>
      <span id="itemB2"></span>
      <span contenteditable="true"></span>
      <p contenteditable="true"></p>
    </div>
  </div>
 </div>