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

【问题标题】：How to set a unique URL placeholder to every new URL input added如何为添加的每个新 URL 输入设置唯一的 URL 占位符
【发布时间】：2018-01-24 20:02:34
【问题描述】：

看看这个表格然后告诉我如何为函数添加的每个新输入设置唯一的占位符。我想用字符串“产品”+计数器替换占位符值。

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

【问题讨论】：

您的<script> 应该在<html> 块内，而不是在外面。此外，您还缺少<head> 和<body>。不确定它是否重要或与您的问题相关。
唯一网址是什么意思？像一个服务器网址
一个问题是您的代码中有一个换行符。 url.innerHTML += 'Product' + counter + ' <input type="url" placeholder="url"><br>'; 应该都在同一行。
不，这不是我的问题，我在文件夹中正确编写了代码并且它运行正常，但我想知道如何在有人单击按钮后添加的每个新 URL 输入中更改占位符。

标签： javascript html forms

【解决方案1】：

要更新占位符，只需将字符串和计数器（或您想要的任何字符串）连接为占位符属性的值：

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++;
};

【讨论】：

没错，这就是我要找的，非常感谢:)

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

  var url = document.getElementById('url'),
    counter = 1,
    but = document.getElementById('bu');
 
 //Say you have array with list of urls 
 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/versions/1.0.x/api/module_substitute.html", "https://alloyui.com/versions/1.0.x/api/module_swf.html", "https://alloyui.com/versions/1.0.x/api/module_swfdetect.html", "https://alloyui.com/versions/1.0.x/api/module_tabview.html", "https://alloyui.com/versions/1.0.x/api/module_test.html", "https://alloyui.com/versions/1.0.x/api/module_widget.html", "https://alloyui.com/versions/1.0.x/api/module_widget-anim.html", "https://alloyui.com/versions/1.0.x/api/module_widget-parent.html", "https://alloyui.com/versions/1.0.x/api/module_widget-position.html", "https://alloyui.com/versions/1.0.x/api/module_widget-position-align.html", "https://alloyui.com/versions/1.0.x/api/module_widget-position-constrain.html", "https://alloyui.com/versions/1.0.x/api/module_widget-stack.html", "https://alloyui.com/versions/1.0.x/api/module_widget-stdmod.html", "https://alloyui.com/versions/1.0.x/api/module_yui.html", "https://alloyui.com/versions/1.0.x/api/A.HTML5.html", "https://alloyui.com/versions/1.0.x/api/A.io.html", "https://alloyui.com/versions/1.0.x/api/A.Node.html", "https://alloyui.com/versions/1.0.x/api/A.NodeList.html", "https://alloyui.com/versions/1.0.x/api/A.Plugin.IO.html", "https://alloyui.com/versions/1.0.x/api/Anim.html", "https://alloyui.com/versions/1.0.x/api/Array.html", "https://alloyui.com/versions/1.0.x/api/ArrayList.html", "https://alloyui.com/versions/1.0.x/api/ArrayList~add.html", "https://alloyui.com/versions/1.0.x/api/ArrayList~filter.html", "https://alloyui.com/versions/1.0.x/api/Assert.ArrayAssert.html", "https://alloyui.com/versions/1.0.x/api/Assert.ComparisonFailure.html", "https://alloyui.com/versions/1.0.x/api/Assert.DateAssert.html", "https://alloyui.com/versions/1.0.x/api/Assert.Error.html", "https://alloyui.com/versions/1.0.x/api/Assert.ObjectAssert.html"]

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

<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>
<button id="bu">add Products urls</button>
<br>
<div id="url">
</div>

【讨论】：