当前位置： 文江博客话题详情

在可满足的内容中添加信息，并生成东西而不会丢失添加的信息

发布于 2025-01-17 22:18:16 字数 4242 浏览 3 评论 0原文

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

它工作正常，但我希望能够在项目之间写入文本，当您再次按下按钮时，只有项目会发生变化，但添加的文本会保留。 目前，当我生成报告时，它会删除添加的文本（这很正常，因为我在添加文本时用 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>

原文

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 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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

一个人的旅程 2025-01-24 22:18:16

您可以将报告的可编辑部分移至“表单输入线”之后。我以灰色的背景强调了它们。现在，用户仅编辑这两行。

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>

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 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>

回复 原文
~没有更多了~

关于作者

宁愿没拥抱

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

十二

文章 0 评论 0

飞烟轻若梦

文章 0 评论 0

OPleyuhuo

文章 0 评论 0

wxb0109

文章 0 评论 0

旧城空念

文章 0 评论 0

-小熊_

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文