在contenteditable中添加信息，并在不丢失添加信息的情况下生成内容

Question

因此，我创建了一个无线电列表，您可以在其中选择3个选项(参见snippet(，然后在内容可编辑区域中生成一个报告，其中包含每个无线电的值。

它工作正常，但我希望能够在项目之间写入文本，当你再次按下按钮时，只有项目会更改，但添加的文本会保留。目前，当我生成报告时，它会删除添加的文本(这很正常，因为当我添加文本时，我会更改id为"itemXX"的字符串，但我找不到使其工作的方法：/(。

理想的情况是，每个项目都可以单独更改，并且添加的文本保持不变。

感谢您的帮助：(

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 class="containers">
<div class="subContainers"><strong>itemA1</strong>
<div class="tripleChoice">
<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 class="subContainers"><strong>itemA2</strong>
<div class="tripleChoice">
<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 class="subContainers"><strong>itemB1</strong>
<div class="tripleChoice">
<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 class="subContainers"><strong>itemB2</strong>
<div class="tripleChoice">
<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 class="subContainers">
<button class="generate" onclick="report()">Create report</button>
</div>
<div class="subContainers editable" 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>

Answer 1

您只需将报告的可编辑部分移动到"形成输入线"；。我用灰色背景突出显示了它们。现在，用户只能编辑这两行。

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 class="containers">
<div class="subContainers"><strong>itemA1</strong>
<div class="tripleChoice">
<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 class="subContainers"><strong>itemA2</strong>
<div class="tripleChoice">
<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 class="subContainers"><strong>itemB1</strong>
<div class="tripleChoice">
<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 class="subContainers"><strong>itemB2</strong>
<div class="tripleChoice">
<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 class="subContainers">
<button class="generate" onclick="report()">Create report</button>
</div>
<div class="subContainers editable">
<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>