如何用JavaScript动态添加新textfield？点击按钮联动展示文本框内容

我来帮你完善这个功能，你的需求是点击按钮后新增一个展示Card Name和Link URL的字段，咱们一步步修复并完成代码：

原代码存在的问题 #

• 输入值获取时机错误：你在页面加载时就获取了输入框的值，此时用户还未输入内容，导致判断永远为空。需要把值的获取放到按钮点击事件内部。
• 条件判断逻辑错误：原判断语句中&&和||的优先级混乱，应该分别检查两个输入框是否为空。
• 新元素未添加内容和挂载：创建了新的div但未设置展示内容，也没将其添加到DOM中。
• 计数器未递增：每次点击后counter需要加1，避免新元素ID重复。

完整实现代码 #

HTML 部分

<!-- text boxes-->
<div class="row">
  <div class="col-md-12">
    <div id="textboxesgroup">
      <div id="textboxdiv1">
        <label style="color:blanchedalmond">Card Name: </label>
        <input type="text" id="textbox1">
      </div>
      <div id="textboxdiv2">
        <label style="color:blanchedalmond">Link Url:&ensp;&ensp;&ensp; </label>
        <input type="text" id="textbox2">
      </div>
      <!-- 添加按钮 -->
      <button id="addbutton" style="margin-top:10px">Add New Card</button>
    </div>
    <!-- 用来存放新增的卡片字段 -->
    <div id="cardContainer" style="margin-top:20px"></div>
  </div>
</div>

JavaScript 部分

//AddnNewCardNavigator
var counter = 2;

$("#addbutton").click(function(){
  // 在点击事件内获取当前输入值，并用trim()去除首尾空格
  var nmecardtxt = document.getElementById("textbox1").value.trim();
  var linkurltxt = document.getElementById("textbox2").value.trim();

  // 正确判断两个输入框是否为空
  if(nmecardtxt === "" || linkurltxt === ""){
    alert("Please insert value in Card name and Link Url textboxes and must be correct");
    return false;
  }

  // 创建新的div元素并设置ID
  var NewCarddiv = $(document.createElement('div')).attr("id", 'cardlink' + counter);
  
  // 设置新div的内容：展示Card Name和Link URL，这里用只读文本框示例
  NewCarddiv.html(`
    <input type="text" 
           value="Card Name: ${nmecardtxt} | Link URL: ${linkurltxt}" 
           readonly 
           style="width:100%; margin-top:5px;">
  `);
  
  // 将新div添加到卡片容器中
  $("#cardContainer").append(NewCarddiv);
  
  // 计数器递增，保证下一个元素ID唯一
  counter++;
});

代码说明 #

1. 输入值获取：将输入值的获取逻辑放到按钮点击事件内部，确保拿到用户当前输入的内容，同时用trim()过滤掉纯空格的无效输入。
2. 空值判断：简化判断逻辑，只要任意一个输入框为空就提示用户。
3. 新元素内容：用模板字符串动态生成展示内容，这里使用只读文本框来展示信息，你也可以根据需求改成<p>标签或其他元素。
4. 元素挂载：将新创建的div追加到专门的cardContainer容器中，方便管理所有新增的卡片字段。
5. 计数器递增：每次点击后counter加1，确保每个新元素的ID唯一，避免DOM元素ID冲突。

内容的提问来源于stack exchange，提问作者shihabmohamed