Javascript кнопка слайд-шоу

Question

Я новичок в программировании javascript, так что кто-нибудь может мне помочь. Это мой код

var button = document.getElementsByTagName('button')[0];
var pic = document.getElementsByTagName('img')[0];

button.addEventListener('click', colorIt, false);

function colorIt(e) {
  pic.innerHTML="src=/'https://picturejs.org/adv/banner.jpg\' width=\'400px\' height=\'150px\'>";

}

<div id="picture">
  <img src="" id="picture" style="display:none;"> 
</div>
<button id="button">Click Me</button>

Answer 1

Вы были на правильном пути. Однако вам необходимо установить каждое свойство в JS.

ТАКЖЕ мне не удалось загрузить picturejs.org, поэтому я поместил туда picsum pi c.

var button = document.getElementsByTagName('button')[0];
var pic = document.getElementsByTagName('img')[0];

button.addEventListener('click', colorIt, false);

function colorIt(e) {
  pic.src='https://picsum.photos/150/400'
  pic.width='400' 
  pic.height='150';
  pic.style.display='block';

}

<div id="picture">
  <img src="" id="picture" style="display:none;"> 
</div>
<button id="button">Click Me</button>

Answer 2

Пожалуйста, попробуйте следующий код:

function fillIt(e) {
  pic.style.display = "block";
  pic.src ="https://libertycity.net/uploads/download/gta5_lamborghini/thumbs/4qhllsfhd8fk9bm4mf36761u37/15205818409903_63e23c-pgta535987529.jpg";
}

Answer 3

Измените вашу функцию colorIt на следующую. Вам нужно установить src, а затем установить display на блокировку. Вы также можете переместить height и width в CSS.

function colorIt(e) {
  pic.src='https://picturejs.org/adv/banner.jpg';
  pic.width = 400;
  pic.height = 150;
  pic.style.display = "block";
}

Answer 4

.innerHTML изменяет содержимое между открывающим и закрывающим тегами (<div>THIS</div>), а не содержимое самого тега (<div THIS></div>).

Вы можете изменить атрибут тегов, используя setAttribute или задав свойство напрямую:

var button = document.getElementsByTagName('button')[0];
var pic = document.getElementsByTagName('img')[0];

button.addEventListener('click', colorIt, false);

function colorIt(e) {
  pic.src='https://picturejs.org/adv/banner.jpg'
  pic.width='400px' 
  pic.height='150px'

}

<div id="picture">
  <img src="" id="picture" style="display:none;"> 
</div>
<button id="button">Click Me</button>

Answer 5

Вам необходимо добавить root вашего изображения, например, в зависимости от того, где вы загрузили изображение в свой P C.

Надеюсь, это поможет!

Answer 6

function fillIt(e) {
  pic.innerHTML="src=/'https://picturejs.org/adv/banner.jpg\' width=\'400px\' height=\'150px\'>";

}

Источник для изображения в JavaScript недействителен. Вы использовали гиперссылки HTML в JS.