将图像添加到javascript幻灯片

-1

我有一个幻灯片放在一起，但我无法使用onClick插入一个额外的图像。我错过了什么？将图像添加到javascript幻灯片

function newDivs(n) { 
 
    var i; 
 
    var x = document.getElementsById("photo"); 
 
    if (n > x.length) { 
 
    slideIndex = 1 
 
    } 
 
    if (n < 1) { 
 
    slideIndex = x.length 
 
    }; 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.display = "none"; 
 
    } 
 
    x[slideIndex - 1].style.display = "block"; 
 
}

<input type="text" name="photo" id="photo" value="http://static.boredpanda.com/blog/wp-content/uuuploads/cute-baby-animals/cute-baby-animals-23.jpg" /> 
 
<button id="addPicture" onclick="newDivs(+1)">Add New Image</button>

来源

2017-04-30 Z.Brown

你得到一个错误信息？它说什么？ – WillardSolutions

onclick没有插入任何图像，也没有'getElementsById'这样的东西。 – xandercoded

您能解释一下您得到的错误是什么以及您期望或期望的行为是什么？ –

你有很多失误开始：

错误：

变种X = document.getElementsById（ “照片”）;

右：

变种X =的document.getElementById（ “照片”）VAL。

来源

2017-04-30 15:46:15

你需要了解一些事情。

当您想对多个元素执行操作时，请不要尝试id。（ID总是返回只有一个元素，它不能与多个元素运行
你的JavaScript功能失常getElementsById正确的是getElementById只是因为正如我所说的ID返回单个元素（getElementById - 。只是删除（ S）从功能。
尝试使用查询选择，就像我在你的例子都习惯了。（querySelectorAll）
查询选择功能将帮助你很多！如果你是在JavaScript中新如果你可以试试jQuery这对你来说真的很容易
如果你想显示图像，你需要使用img标签。现在你从输入标签获取URL并试图隐藏它们是没有意义的;
这里是您的解决方案

var i= 0; 
 
var slideIndex = 0; 
 
function newDivs(n) { 
 
    var i; 
 
    var x = document.querySelectorAll(".photo"); 
 
    console.log(x); 
 
    if (n > x.length) { 
 
    slideIndex = 1 
 
    } 
 
    if (n < 1) { 
 
    slideIndex = x.length 
 
    }; 
 
    
 
    for (var index = 0; index < x.length; index++) { 
 
    console.log(x[index].style); 
 
    x[index].style.display = 'none'; 
 
    } 
 
    console.log(slideIndex); 
 
    x[slideIndex].style.display = "block"; 
 
}

<input type="text" class="photo" name="photo" id="photo" value="http://static.boredpanda.com/blog/wp-content/uuuploads/cute-baby-animals/cute-baby-animals-23.jpg" /> 
 
<button id="addPicture" onclick="newDivs(+1)">Add New Image</button>

来源

2017-05-01 02:28:59

将图像添加到javascript幻灯片

回答

相关问题