Question

我有两个文本框和一个按钮，我想添加一个新的文本字段，当我点击按钮时，应显示textbox1中的卡片名称和从textbox2附加的链接URL

＆＃13;

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

＆＃13;

<!-- 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:&ensp;&ensp;&ensp; </label><input type="textbox" id="textbox2">
    </div>
  </div>
</div>
</div>

＆＃13;

Answer 1

您的变量nmecardtxt和linkurltxt必须在里面创建点击功能，
因为在加载页面时它是空的。

我也冒昧地使用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:&ensp;&ensp;&ensp;</label><input type="textbox" id="textbox2">
      </div>
    </div>
  </div>
</div>

<!-- Added the below -->
<div id="cards">
</div>
<button id="addbutton">Add…</button>

希望它有所帮助。

Answer 2

以下是您尝试完成的简化版本：

＆＃13;

function addNewCard() {
  var name = $('#name').val();
  var url = $('#url').val();
  var count = $('#cards > .card').length;
  
  if (!name || !url) {
    alert('Missing name and/or URL.');
  }
  
  var card = $('<div class="card"></div>').html("Name: " + name + "<br>URL: " + url);
  
  $("#cards").append(card);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="url">URL:</label>
<input type="text" id="url" name="url">
<input type="submit" value="Add Card" onclick="addNewCard();">

<div id="cards">
</div>

＆＃13;

如何通过javascript

2 个答案: