Javascript button slideshow

Question

I am new to the javascript programming so can someone help me. This is my code

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>

you should set the src attribute like so pic.src = "YOUR_IMG_URL" — AngelSalazar, May 05 '20 at 18:38
Does this answer your question? [JavaScript change img src attribute without jQuery](https://stackoverflow.com/questions/9731728/javascript-change-img-src-attribute-without-jquery) — mr. pc_coder, May 05 '20 at 18:40

score 0 · Answer 1 · answered May 05 '20 at 18:42

0

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

}

The Source for the image in JavaScript is invalid. You used HTML hyperlinks in JS.

answered May 05 '20 at 18:42

CoolPerson879

60
1
12

score 0 · Answer 2 · answered May 05 '20 at 18:43

.innerHTML modifies the content between the opening and closing tags (<div>THIS</div>), not the content of the tag itself (<div THIS></div>).

You can modify the tags attribute using setAttribute or by setting a property directly:

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>

score 0 · Accepted Answer · answered May 05 '20 at 18:44

Change your colorIt function to the following. You need to set the src and then set the display to block. You might also want to move the height and width to CSS.

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

score 0 · Answer 4 · edited May 15 '20 at 10:21

0

Please try the below code:

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

edited May 15 '20 at 10:21

Nayana_Das

1,789
4
23
48

answered May 05 '20 at 18:48

GPSE

1
2

score 0 · Answer 5 · answered May 05 '20 at 18:56

You were on the right track. However, you need to set each property in JS.

ALso I could not get picturejs.org to load so I placed a picsum pic in there instead.

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>

score -2 · Answer 6 · answered May 05 '20 at 18:42

-2

You need to add the root of your image in , for example depeding on where you have the image downloaded in your PC.

Hope this helps !

answered May 05 '20 at 18:42

Hilal Isghair

1

Javascript button slideshow

6 Answers6