Javascript Onkeyup不'；我不能在另一个功能中工作

动态添加图像，但当我在文本框中输入链接时出现问题，图像不显示

以下是一个屏幕截图：

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

//最大图像
var maxSlide=2000；
//起始图像
var curSlide=0；
//起始Id动态
var-id=0；
函数generateSlide（）{
//如果Textboxt输入链接图像，则显示此id=“img\u dynamicid”src
功能切换（元素）{
we=元素值；
document.getElementById（'img_'+Ids+''）.src=we；
} 
如果（光标<最大滑块）{
var html=''；
html+=''；
html+=''；
html+=''；
html+=''；
html+=''；
html+=''；
html+='
'；
html+=''；
html+=''；
html+=''；
html+=‘链接图像’；
html+=''；
html+=''；
html+=''；
html+=''；
html+=''；
html+=''；
html+=“删除”；
html+=''；
html+=''；
html+=''；
html+=''；
html+=''；
html+=''；
html+=''；
$（“#主要内容”）.append（html）；
curSlide++；
Ids++；
$（“#counter”）.html（curSlide+“从2000年起”）；
}
}
添加图像
0从2000年起

您正在函数内部定义切换函数，因此在尝试执行事件处理程序的全局范围内无法访问该函数。因此，您需要将切换定义移出函数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

---

老实说，应该使用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>';
// ...
}

功能切换（id）{
document.getElementById（'img_'+id+''）.src=this.value；
} 
函数generateSlide（）{
// ...
html+=''；
// ...
}

你包括jquery了吗？@Sushil他不需要jquery。他有自己的

toggle

函数。在

generateSlide

方法之外定义

toggle

方法，然后再试一次。@Sushil yes，用于generateslide@JohnR如果我将toggle放在函数generateSlide之外，则此toggle not get dynamic id无效，TypeError:document.getElementById（…）是null，这超出了此问题的范围，因为现在正在调用所需的函数。问题在于您的文档中找不到“img_”+id。因此，在您的DOM中基本上没有id为img_0的映像。我尝试将此image.src更改为“未定义”