javascript - 如何通过javascript动态添加新按钮
问题描述
我有两个文本框和一个按钮,我想添加一个新的文本字段,当我点击按钮时,它应该显示来自 textbox1 的卡片名称和来自 textbox2 的链接 URL
//AddnNewCardNavigator
var counter=2;
var nmecardtxt= document.getElementById("textbox1").value;
var linkurltxt= document.getElementById("textbox2").value;
$("#addbutton").click(function(){
if(nmecardtxt ==""||nmecardtxt ==0||nmecardtxt ==null
&& linkurltxt ==""||linkurltxt ==""|| linkurltxt ==0||linkurltxt ==null){
alert("Please insert value in Card name and Link Url textboxes and must be correct");
return false;
}
var NewCarddiv = $(document.createElement('div')).attr("id",'cardlink'+counter);
NewCarddiv.after().html()
})
</script>
<!-- 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="textbox" id="textbox1">
</div>
<div id="textboxdiv2">
<label style="color:blanchedalmond">Link Url:    </label><input type="textbox" id="textbox2">
</div>
</div>
</div>
</div>
解决方案
nmecardtxt
您的变量linkurltxt
必须在 click 函数内
创建,
因为在加载页面时它是空的。
我还冒昧地将 jQuery 用于该变量,因为您已经在使用它,并尝试增强其他一些功能:(
有关详细信息,请参阅我的代码中的注释)
//AddnNewCardNavigator
var counter = 2;
// On click function
$("#addbutton").click(function() {
// Here it's better
var nmecardtxt = $("#textbox1").val();
var linkurltxt = $("#textbox2").val();
// Modified you test here
if (!nmecardtxt || !linkurltxt) {
alert("Please insert value in Card name and Link Url textboxes and must be correct");
return false;
}
// Modified creation of the card
var link = $(document.createElement('a')).attr("href", linkurltxt).html(linkurltxt);
var NewCarddiv = $(document.createElement('div')).attr("id", 'cardlink' + counter).html(nmecardtxt + ": ").append(link);
$('#cards').append(NewCarddiv);
//NewCarddiv.after().html(); // Was that line an attempt of the above ?
});
body {
background: #888;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 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="textbox" id="textbox1">
</div>
<div id="textboxdiv2">
<label style="color:blanchedalmond">Link Url:   </label><input type="textbox" id="textbox2">
</div>
</div>
</div>
</div>
<!-- Added the below -->
<div id="cards">
</div>
<button id="addbutton">Add…</button>
希望能帮助到你。
推荐阅读
- openssl - 在 OpenSSL 1.1.x 中,确定给定的 SSL* 是否对应于连接的服务器端或客户端
- sql-server - 创建“视图”以连接两个数据库
- python - Spacy模型不一致的预测
- angular - 如何使用 Angular 4 使用模板驱动的表单发布表单数据
- css - 如何根据屏幕宽度计算 CSS 缩放因子?
- python - python检查日期时间比n天早吗?
- java - 错误:未找到 Gradle DSL 方法:“实施()”
- dart - 在 Dart 中追加到 String 或 var
- javascript - 如何附加包含 Angular 8 属性的 HTML 标签
- ionic4 - 如何从 PWA 的离子标签中预取图像?