Question

动态添加图片，但是当我输入文本框图片中的链接时，我遇到了问题。

这是一个截图： enter image description here

在FireBug中，我看到以下错误：

ReferenceError：未定义切换

这是我的代码：

<script>
// Max Image
var maxSlide = 2000;
// Start Image
var curSlide = 0;
// Start Id dynamic
var Ids = 0;

function generateSlide() {
  // If Textboxt input link image, this id="img_dynamicid" src show
  function toggle(element) {
    we = element.value;
    document.getElementById('img_'+Ids+'').src=we;  
  } 

  if( curSlide < maxSlide ) {
    var html ='<div class="row" id="slideAdd_'+Ids+'" >';
    html+='     <div class="col-md-12">';
    html+='         <div class="box">';
    html+='             <div class="box-content">';
    html+='                 <form action="#" id="slide_'+Ids+'" class="form-horizontal" enctype="multipart/form-data">';
    html+='                     <div class="form-group">';
    html+='                         <div class="col-sm-9 col-lg-10 controls">';
      html+='<center><img src="../images/noimage.png" id="img_'+Ids+'" style="width:150px;height:150px"></center><br/>';
    html+='                         </div>';
    html+='                     </div>';
    html+='                     <div class="form-group">';
    html+='                         <label class="col-sm-3 col-lg-2 control-label">Link Image</label>';
    html+='                         <div class="col-sm-9 col-lg-10 controls">';
    html+='                             <input type="text" onkeyup="toggle(this)" placeholder="Link Image" name="link_'+Ids+'" id="judul_'+Ids+'" class="form-control" required>';
    html+='                         </div>';
    html+='                     </div>';
    html+='                     <div class="form-group">';
    html+='                         <div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2">';
    html+='                             <button onClick="removeSlide(\''+Ids+'\'); return false;" class="btn btn-danger"><i class="fa fa-times"></i> Remove</button>';
    html+='                         </div>';
    html+='                     </div>';
    html+='                 </form>';
    html+='             </div>';
    html+='         </div>';
    html+='     </div>';
    html+=' </div>';
    $("#main-content").append(html);
    curSlide++;
    Ids++;
    $("#counter").html(curSlide+" from 2000");
  }
}
</script>

<button type="submit" class="btn btn-primary" onClick="generateSlide()" ><i class="fa fa-plus"></i>Add Images</button>
<span id="counter" >0 from 2000</span>

Answer 1

说实话，你应该使用jQuery附加事件。但是如果你想这样做，你应该把toggle（）放在场外并将 id 参数传递给它

function toggle(id){
    document.getElementById('img_'+id+'').src = this.value;
  } 


function generateSlide() {

// ...
     html+='<input type="text" onkeyup="toggle(' + Ids + ')" placeholder="Link Image" name="link_'+Ids+'" **id="judul_'+Ids+'"** class="form-control" required>';
// ...
}

Answer 2

您正在函数内定义 toggle 函数，因此在尝试执行事件处理程序的全局范围内无法访问它。因此，您需要将 toggle 定义移出函数 generateSlide 的范围。

应该看起来像

function toggle(element) {
  we = element.value;
  document.getElementById('img_'+Ids+'').src=we;  
} 
function generateSlide() {
  // If Textboxt input link image, this id="img_dynamicid" src show

Onkeyup在另一个函数中不起作用

2 个答案: