Fatal编程技术网
  • javascript/
  • Javascript 如何为添加的每个新URL输入设置唯一的URL占位符

Javascript 如何为添加的每个新URL输入设置唯一的URL占位符

javascript html forms

Javascript 如何为添加的每个新URL输入设置唯一的URL占位符,javascript,html,forms,Javascript,Html,Forms,看这张表格，告诉我 如何为函数添加的每个新输入设置唯一占位符。我想用字符串“Product”+counter替换占位符值 <html> <input class="name" type='text' placeholder="First name" required> <input class="name" type='text' placeholder="Last name" required><br> <i

看这张表格，告诉我 如何为函数添加的每个新输入设置唯一占位符。我想用字符串“Product”+counter替换占位符值

<html>
<input class="name" type='text' placeholder="First name" required>
        <input class="name" type='text' placeholder="Last name" required><br>
        <input type="email" placeholder="example@mail.com" required><br>
        <div id="url">
        </div>
        <button id="bu">add Products urls</button>
</html>

<script>
var url = document.getElementById('url'),
    counter = 1,
    but = document.getElementById('bu');

but.onclick = function () {
  'use strict';
   url.innerHTML += 'Product' + counter + ' <input type="url" placeholder="url">
   <br>';
    counter++;
};
</script>






添加产品URL
var url=document.getElementById（'url'），
计数器=1，
但是=document.getElementById（'bu'）；
but.onclick=函数（）{
"严格使用",；
url.innerHTML+=“产品”+计数器+”

",；
计数器++；
};
要更新占位符，只需将字符串和计数器（或任何您想要的字符串）作为占位符属性的值：

var url = document.getElementById('url'),
    counter = 1,
    but = document.getElementById('bu');

but.onclick = function () {
  'use strict';
  var placeholder = 'Product' + counter;
   url.innerHTML += placeholder + ' <input type="url" placeholder="' + placeholder +'"><br>';
    counter++;
};

var url=document.getElementById（'url'），
计数器=1，
但是=document.getElementById（'bu'）；
but.onclick=函数（）{
"严格使用",；
变量占位符='产品'+计数器；
url.innerHTML+=占位符+'
'；
计数器++；
};

var url=document.getElementById（'url'）；
var计数器=1；
var but=document.getElementById（'bu'）；
but.onclick=function（）{
"严格使用",；
url.innerHTML+=“产品”+计数器+”
；
计数器++；
};






添加产品URL


var url=document.getElementById（'url'），
计数器=1，
但是=document.getElementById（'bu'）；
//假设您有一个包含URL列表的数组
var arr=[”http://alloy.liferay.com/deploy/api", "https://alloyui.com/versions/1.0.x/api/index.html", "https://alloyui.com/versions/1.0.x/api/module_aui-autocomplete.html", "https://alloyui.com/versions/1.0.x/api/module_aui-button-item.html", "https://alloyui.com/versions/1.0.x/api/module_aui-calendar.html", "https://alloyui.com/versions/1.0.x/api/module_aui-char-counter.html", "https://alloyui.com/versions/1.0.x/api/module_aui-color-picker.html", "https://alloyui.com/versions/1.0.x/api/module_aui-component.html", "https://alloyui.com/versions/1.0.x/api/module_aui-datatype.html", "https://alloyui.com/versions/1.0.x/api/module_aui-delayed-task.html", "https://alloyui.com/versions/1.0.x/api/module_aui-dialog.html", "https://alloyui.com/versions/1.0.x/api/module_aui-editable.html", "https://alloyui.com/versions/1.0.x/api/module_aui-event.html", "https://alloyui.com/versions/1.0.x/api/module_aui-image-viewer.html", "https://alloyui.com/versions/1.0.x/api/module_aui-io.html", "https://alloyui.com/versions/1.0.x/api/module_aui-live-search.html", "https://alloyui.com/versions/1.0.x/api/module_aui-loading-mask.html", "https://alloyui.com/versions/1.0.x/api/module_aui-nested-list.html", "https://alloyui.com/versions/1.0.x/api/module_aui-node.html", "https://alloyui.com/versions/1.0.x/api/module_aui-overlay.html", "https://alloyui.com/versions/1.0.x/api/module_aui-paginator.html", "https://alloyui.com/versions/1.0.x/api/module_aui-panel.html", "https://alloyui.com/versions/1.0.x/api/module_aui-parse-content.html", "https://alloyui.com/versions/1.0.x/api/module_aui-portal-layout.html", "https://alloyui.com/versions/1.0.x/api/module_aui-progressbar.html", "https://alloyui.com/versions/1.0.x/api/module_aui-rating.html", "https://alloyui.com/versions/1.0.x/api/module_aui-resize.html", "https://alloyui.com/versions/1.0.x/api/module_aui-textboxlist.html", "https://alloyui.com/versions/1.0.x/api/module_aui-toolbar.html", "https://alloyui.com/versions/1.0.x/api/module_aui-tooltip.html", "https://alloyui.com/versions/1.0.x/api/module_aui-tree.html", "https://alloyui.com/versions/1.0.x/api/module_align-plugin.html", "https://alloyui.com/versions/1.0.x/api/module_anim.html", "https://alloyui.com/versions/1.0.x/api/module_async-queue.html", "https://alloyui.com/versions/1.0.x/api/module_attribute.html", "https://alloyui.com/versions/1.0.x/api/module_base.html", "https://alloyui.com/versions/1.0.x/api/module_cache.html", "https://alloyui.com/versions/1.0.x/api/module_classnamemanager.html", "https://alloyui.com/versions/1.0.x/api/module_collection.html", "https://alloyui.com/versions/1.0.x/api/module_console.html", "https://alloyui.com/versions/1.0.x/api/module_console-filters.html", "https://alloyui.com/versions/1.0.x/api/module_cookie.html", "https://alloyui.com/versions/1.0.x/api/module_dataschema.html", "https://alloyui.com/versions/1.0.x/api/module_datasource.html", "https://alloyui.com/versions/1.0.x/api/module_datatype.html", "https://alloyui.com/versions/1.0.x/api/module_dd.html", "https://alloyui.com/versions/1.0.x/api/module_dom.html", "https://alloyui.com/versions/1.0.x/api/module_dump.html", "https://alloyui.com/versions/1.0.x/api/module_event.html", "https://alloyui.com/versions/1.0.x/api/module_event-custom.html", "https://alloyui.com/versions/1.0.x/api/module_event-simulate.html", "https://alloyui.com/versions/1.0.x/api/module_history.html", "https://alloyui.com/versions/1.0.x/api/module_imageloader.html", "https://alloyui.com/versions/1.0.x/api/module_intl.html", "https://alloyui.com/versions/1.0.x/api/module_io.html", "https://alloyui.com/versions/1.0.x/api/module_json.html", "https://alloyui.com/versions/1.0.x/api/module_loader.html", "https://alloyui.com/versions/1.0.x/api/module_node.html", "https://alloyui.com/versions/1.0.x/api/module_node-focusmanager.html", "https://alloyui.com/versions/1.0.x/api/module_node-menunav.html", "https://alloyui.com/versions/1.0.x/api/module_oop.html", "https://alloyui.com/versions/1.0.x/api/module_overlay.html", "https://alloyui.com/versions/1.0.x/api/module_plugin.html", "https://alloyui.com/versions/1.0.x/api/module_pluginhost.html", "https://alloyui.com/versions/1.0.x/api/module_profiler.html", "https://alloyui.com/versions/1.0.x/api/module_querystring.html", "https://alloyui.com/versions/1.0.x/api/module_queue-promote.html", "https://alloyui.com/versions/1.0.x/api/module_shim-plugin.html", "https://alloyui.com/versions/1.0.x/api/module_slider.html", "https://alloyui.com/versions/1.0.x/api/module_sortable.html", "https://alloyui.com/versions/1.0.x/api/module_stylesheet.html", "https://alloyui.com/ver