Question

我将幻灯片放在一起，但我在使用onClick插入其他图片时遇到问题。我错过了什么？

＆＃13;

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";
}

＆＃13;

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

＆＃13;

Answer 1

你有很多错误：

错误：

var x = document.getElementsById（“photo”）;

右：

var x = document.getElementById（“photo”）。val;

Answer 2

您需要了解一些事项。

当您想对多个元素执行操作时，请不要尝试id。（ID始终只返回单个元素。它不能与多个元素一起运行。
您的Javascript函数错误getElementsById。正确是getElementById。只是因为我说ID返回单个元素（getElementById - 只需从函数中删除。
尝试使用查询选择器。就像我在你的例子中所使用的那样。（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>

将图像添加到javascript幻灯片中

2 个答案: