简体   繁体   English

我有一个带有选择的创建元素的表单。 我该怎么做才能创建一次元素?

[英]I have a form with select which creates elements. How I can do that elements creates only once?

I have JS code which creates paragraph and input elements according to html. 我有JS代码,可根据html创建段落和输入元素。 But I need this code to create each element only once. 但是我需要此代码仅创建一次每个元素。

Peace of Javascript code 平安的Javascript代码

function comFunction(sel) {
   switch (sel.value) {
        case 'skype':
            var skype = document.createElement("P");
            var temp = document.createTextNode("Enter your skype");
            var input = document.createElement("input");
            input.type = "text";
            skype.appendChild(temp);
            form.appendChild(skype);
            form.appendChild(input);
            break;
}

HTML code HTML代码

<form id="form">
<select name="liason" id="liason" onchange="comFunction(this);">
    <option value="skype">Skype</option>
    <option value="icq">ICQ</option>
    <option value="facebook">Facebook</option>
    <option value="email">e-mail</option>
</select>
</form>

If you add an id to the elements being created and appended to the DOM, you can then check for their existence before running the code that would create them a second time: 如果将id添加到要创建的元素中并附加到DOM,则可以在运行将再次创建它们的代码之前检查它们的存在:

 function comFunction(sel) {

   switch (sel.value) {
    case 'skype':
        if(document.getElementById("skypeParagraph") === null) {
           var skype = document.createElement("P");
           skype.setAttribute("id", "skypeParagraph");
           var temp = document.createTextNode("Enter your skype");
           var input = document.createElement("input");
           input.type = "text";
           skype.appendChild(temp);
           form.appendChild(skype);
           form.appendChild(input);
        }
        break;
 }

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 JavaScript 事件委派不起作用。 我想切换多个元素。 我该怎么做? - JavaScript Event Delegation not working. I want to toggle multiple elements. How I can do it? 如何编写一个云 function,它在新用户通过身份验证后在 Firestore 数据库中创建一个用户? - How do I write a cloud function which creates a user in the Firestore database once a new user gets authenticated? javascript 数组显示元素,元素之间使用逗号。 如何将逗号更改为破折号 - javascript array display elements with a comma between elements. How do I change the comma to a dash 对于 2 个不同的元素,我有相同的 ngStyle。 如何覆盖它们以保持代码干燥? - I have the same ngStyle for 2 different elements. How to overwrite them to keep the code DRY? jQuery如何创建DOM元素 - How jQuery creates DOM elements 如何使用jquery查找并选择具有以特定单词开头的数据属性的所有元素? - How can I find and select all elements which have data attribute start with specific word with using jquery? 如何使用给定的标签名称创建一个 ES6 class 来创建新的 HTML 元素并具有操作它的方法? - How can I create an ES6 class that creates new HTML elements using given tag name and has methods to manipulate it? 如何选择包装器中的所有元素? - How can I select all elements which are into a wrapper? 赛普拉斯:我怎样才能 select 具有特定条件的列表元素? - Cypress: How can I select elements of a list that have a certain condition? 如果选择包含相同嵌套元素的整个树,如何仅获取 DOM 元素的内容一次? - How can I grab the content of a DOM element only once if selecting an entire tree which also contains those same nested elements?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM