如何解決我的JS從輸入元素

Question

將圖像添加到滑塊我需要幫助得到這個：

<ul id="slides"> 
    <li class="slide"> 
    <img src="url_from_array" /> 
    </li> 
    <li class="slide"> 
    <img src="url_from_array" /> 
    </li> 
</ul> 

與輸入元素添加圖像的URL。

我有這樣的代碼

var imgUrl = ['https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg']; 
 

 
function makeUL(array) { 
 
    // Create the list element: 
 
    list = document.createElement('ul'); 
 
    list.id = "slides"; 
 

 
    for(var i = 0; i < array.length; i++) { 
 
     // Create the list item: 
 
     var li = document.createElement('li'); 
 
     li.className = "slide"; 
 
     var img = document.createElement('img'); 
 

 
     // Set its contents: 
 
     img.src = array[i]; 
 
     li.appendChild(img); 
 
     //li.appendChild(document.createTextNode(array[i])); 
 

 
     // Add it to the list: 
 
     list.appendChild(li); 
 
    } 
 

 
    // Finally, return the constructed list: 
 
    return list; 
 
} 
 
// Add the contents of imgUrl to #slides: 
 
document.getElementById('slider').appendChild(makeUL(imgUrl)); 
 

 

 
function addImg(){ 
 
    var input = document.getElementById("input"); 
 
    if (input.value != ""){ 
 
    imgUrl.push(document.getElementById("input").value); 
 
    return list; 
 
    } 
 
} 
 
//test obsahu array 
 
var arrayLength = imgUrl.length; 
 
for (var i = 0; i < arrayLength; i++) { 
 
    document.getElementById(demo).innerHTML = myStringArray[i]; 
 
    //Do something 
 
}

<div id="slider"></div> 
 
<form> 
 
<input id="input" type="text"> 
 
    <input type=button onclick="addImg()" value="Add image url to slider"/> 
 
</form>

如果我將添加URL輸入元素，並提交，URL將被添加到陣列imgUrl的，但在列表#slides它將被添加任何東西。

有人可以幫助我嗎？ 我會感謝您的任何建議。

Answer 1

我編輯你的代碼，這裏的工作演示：

var imgUrl = ['http://lorempixel.com/400/200/']; 
 

 
function makeUL(array) { 
 
    // Create the list element: 
 
    list = document.createElement('ul'); 
 
    list.id = "slides"; 
 

 
    for(var i = 0; i < array.length; i++) { 
 
     // Create the list item: 
 
     var li = document.createElement('li'); 
 
     li.className = "slide"; 
 
     var img = document.createElement('img'); 
 

 
     // Set its contents: 
 
     img.src = array[i]; 
 
     li.appendChild(img); 
 
     //li.appendChild(document.createTextNode(array[i])); 
 

 
     // Add it to the list: 
 
     list.appendChild(li); 
 
    } 
 
    
 
    // Finally, return the constructed list: 
 
    return list; 
 
} 
 
// Add the contents of imgUrl to #slides: 
 
document.getElementById('slider').appendChild(makeUL(imgUrl)); 
 

 

 
function addImg(){ 
 
    var input = document.getElementById("input"); 
 
    if (input.value != ""){ 
 
    imgUrl.push(document.getElementById("input").value); 
 
    document.getElementById("slider").innerHTML = ''; //najprv sa to musi vycistit pretoze innerHTML to tam nepridavalo ako HTMl ale ako objekt, preto som to zamenil za appendChild 
 
    document.getElementById("slider").appendChild(makeUL(imgUrl)); 
 
    
 
    } 
 
}

<div id="slider"></div> 
 
<form> 
 
<input id="input" type="text"> 
 
    <input type=button onclick="addImg()" value="Add image url to slider"/> 
 
</form>

希望它能幫助。