我的第三个 JavaScript function 缺少什么？

Question

介绍：

提供一点上下文：我正在尝试在基于 HTML/CSS/JS 的 webticket 构建器中创建解决方案。

这意味着我正在使用拖放工具创建在线 forms，该工具会自动生成标题、名称、ID 以及通用 HTML 代码中的所有内容。 所以我不能做的是改变整体设置。

我创建的每个选择字段都会给我一个小文本字段，它应该用作此特定选择字段的帮助字段。 因此，例如，我有一个文本字段“邮件地址” - 然后帮助文本将在其下方显示“请使用格式 firstname.lastname@mailprovider.com”。

这个“帮助”文本框是普通的 HTML，为我提供了在其间添加额外代码的可能性 - 因此它的一切都很漂亮。

html 布局不是我的主意，我只能部分更改它。

我想做的事：

创建一个带有空链接的额外列表，因此我可以在每个项目上使用“onclick”：

<!-- automatically visible -->

<!-- Checkbox im Status checked -->
<input type="checkbox" id="check" onclick="toggleBoxVisibility()" checked> Please choose which assignment type is to be requested:

<!-- Modal / Pop Up Fenster -->
<div id="mymodal" class="modal">

  <!-- Modal content -->
    <div class="modal-content">


      <!-- List items as links to make them clickable -->
        <ul id="myUL">
        <font size="3em">
          <li><a id="li1" title="item1" href="#" onclick="returncontent(this);return false;showitem1();">Item 1</a></li>
          <li><a id="li2" title="item2" href="#" onclick="returncontent(this);return false;showitem2();">Item 2</a></li>
          <li><a id="li3" title="item3" href="#" onclick="returncontent(this);return false;showitem3();">Item 3</a></li>
        </font>
        </ul>

    </div>
</div>

选择列表则具有 3 个触发功能：
1.将所选项目返回到另一个文本字段（作品）
2.不打开“#”网站（作品）
3.根据所选列表项显示更多选择字段（不起作用）

这基本上是一种创建动态网络表单的尝试，因为该工具本身不提供此类选项

所以这就是我另外拥有的：
- 带有 class "item1" 和两个文本字段的字段集：

此代码直接从工具中复制，因此通常具有直观的 ID 和布局。

<fieldset class="item1"><legend>Item 1 Selections</legend><div id="d_000000001845952" class="field  text"><label for="f_000000001845952" id="l_000000001845952">Information 1</label>
                        <input id="f_000000001845952" name="id23" value=""     />
                      </div><div id="d_000000001844977" class="field  text "><label for="f_000000001844977" id="l_000000001844977">Information 2</label>
                      <input id="f_000000001844977" name="id24" value=""     /></div></fieldset>

• 打开网络表单时隐藏字段集“item1”的 CSS 代码：
  

  .item1 {
         display: none;
       }

• 和我的 js 函数：
  第一个将所选项目返回到特定文本字段：

   <script type = "text/JavaScript">
   function returncontent(elem) {
   document.getElementById("f_000000001845521").value=elem.title;
   document.getElementById("mymodal").style.display = "none";
   document.getElementById("check").checked = false;
   }
   returncontent();
   </script> 

第二个向我展示列表项 1 的必要选择字段：

<script type = "text/JavaScript">
function showitem1() {
    document.getElementsByClassName("item1")[0].style.display = "block";
}
</script>

而现在后者是，什么不起作用，我不明白为什么。

我已经构建了几个复选框，通过 ID 或 class 显示/隐藏单个字段和字段集，所以据我所知，这次除了一次触发两个函数之外，我没有做任何不同的事情。

在这里，您可以找到我正在尝试做的事情。

Answer 1

我不知道您为什么这样做，但是您的问题将通过更改onclick中的功能顺序来解决。 我改变了返回false的地方； 在showitem1()之后

在此处检查可用版本

 <ul id="myUL"> <font size="3em"> <li><a id="li1" title="item1" href="#" onclick="returncontent(this);showitem1();return false;">Item 1</a></li> <li><a id="li2" title="item2" href="#" onclick="returncontent(this);showitem2();return false;">Item 2</a></li> <li><a id="li3" title="item3" href="#" onclick="returncontent(this);showitem3();return false;">Item 3</a></li> </font> </ul>

Answer 2

 document.getElementById("f_000000001845521").readOnly = true; function toggleBoxVisibility() { if (document.getElementById("check").checked == true) { document.getElementById("mymodal").style.display = "block"; } else { document.getElementById("mymodal").style.display = "none"; } } toggleBoxVisibility(); function returncontent(elem) { if(elem) document.getElementById("f_000000001845521").value = elem.title; document.getElementById("mymodal").style.display = "none"; document.getElementById("check").checked = false; } returncontent(); function showitem1() { document.getElementsByClassName("item1")[0].style.display = "block"; }

 .item1 { display: none; }

 <input id="f_000000001845521" name="id12" value="This field is set automatically, based on chosen element from the list below." /> <div class="help"> <script type="text/JavaScript"> document.getElementById("f_000000001845521").readOnly = true; </script> </div> <input type="checkbox" id="check" onclick="toggleBoxVisibility()" checked> Please choose which assignment type is to be requested: <div id="mymodal" class="modal"> <div class="modal-content"> <ul id="myUL"> <font size="3em"> <li><a id="li1" title="item1" href="javascript:void(0)" onclick="returncontent(this);showitem1();">Item 1</a></li> <li><a id="li2" title="item2" href="javascript:void(0)" onclick="returncontent(this);showitem2();">Item 2</a></li> <li><a id="li3" title="item3" href="javascript:void(0)" onclick="returncontent(this);showitem3();">Item 3</a></li> </font> </ul> </div> </div> <fieldset class="item1"> <legend>Item 1 Selections</legend> <div id="d_000000001845952" class="field text"><label for="f_000000001845952" id="l_000000001845952">Information 1</label> <input id="f_000000001845952" name="id23" value="" /> </div> <div id="d_000000001844977" class="field text "><label for="f_000000001844977" id="l_000000001844977">Information 2</label> <input id="f_000000001844977" name="id24" value="" /></div> </fieldset>

Answer 3

我在这里更改了您的代码的几个部分，但最值得注意的是您可以从第二个 function 调用第一个（几乎是全局类型的函数）。 我也确实将三个showitem函数合二为一fieldset并根据单击的元素标题设置要显示的字段集。

您可以从onclick 。 您只需要更改return false; ，把它放在最后（或者只是删除它并return: false;来自 function?.!）。

 function toggleBoxVisibility() { if (document.getElementById("check").checked == true) { document.getElementById("mymodal").style.display = "block"; var els = document.getElementsByClassName("item"); Array.prototype.forEach.call(els, function(el) { el.style.display = "none"; }); } else { document.getElementById("mymodal").style.display = "none"; } } toggleBoxVisibility(); function returncontent(elem) { document.getElementById("f_000000001845521").value = elem.title; document.getElementById("mymodal").style.display = "none"; document.getElementById("check").checked = false; } function showitem(elem) { returncontent(elem); document.getElementsByClassName(elem.title)[0].style.display = "block"; return false; }

 .item1, .item2, .item3 { display: none; }

 <input id="f_000000001845521" name="id12" value="This field is set automatically, based on chosen element from the list below." /> <div class="help"> <script type="text/JavaScript"> document.getElementById("f_000000001845521").readOnly = true; </script> </div> <:-- automatically visible --> <;-- Checkbox im Status checked --> <input type="checkbox" id="check" onclick="toggleBoxVisibility()" checked> Please choose which assignment type is to be requested; <;-- Modal / Pop Up Fenster --> <div id="mymodal" class="modal"> <!-- Modal content --> <div class="modal-content"> <!-- List items as links to make them clickable --> <ul id="myUL"> <font size="3em"> <li><a id="li1" title="item1" href="#" onclick="showitem(this);">Item 1</a></li> <li><a id="li2" title="item2" href="#" onclick="showitem(this);">Item 2</a></li> <li><a id="li3" title="item3" href="#" onclick="showitem(this);">Item 3</a></li> </font> </ul> </div> </div> <fieldset class="item item1"> <legend>Item 1 Selections</legend> <div id="d_000000001845952" class="field text"> <label for="f_000000001845952" id="l_000000001845952">Information 1</label> <input id="f_000000001845952" name="id23" value="" /> </div> <div id="d_000000001844977" class="field text "> <label for="f_000000001844977" id="l_000000001844977">Information 2</label> <input id="f_000000001844977" name="id24" value="" /> </div> </fieldset> <fieldset class="item item2"> <legend>Item 2 Selections</legend> <div id="d_000000001845952" class="field text"> <label for="f_000000001845952" id="l_000000001845952">Information 1</label> <input id="f_000000001845952" name="id23" value="" /> </div> <div id="d_000000001844977" class="field text "> <label for="f_000000001844977" id="l_000000001844977">Information 2</label> <input id="f_000000001844977" name="id24" value="" /> </div> </fieldset> <fieldset class="item item3"> <legend>Item 3 Selections</legend> <div id="d_000000001845952" class="field text"> <label for="f_000000001845952" id="l_000000001845952">Information 1</label> <input id="f_000000001845952" name="id23" value="" /> </div> <div id="d_000000001844977" class="field text "> <label for="f_000000001844977" id="l_000000001844977">Information 2</label> <input id="f_000000001844977" name="id24" value="" /> </div> </fieldset>