admin 管理员组

文章数量: 1086019

I have a holding page for a site Under Construction.

There is an image and a box with a button. on clicking the button I want the image to change.

There will be collections of images with the same name plus a subscript (eg: TG-img-01.jpg).
Idea is to increment the subscript.

Not used JavaScript for 15 years, so looking for examples of how it can be done.

cheers.

I have a holding page for a site Under Construction.

There is an image and a box with a button. on clicking the button I want the image to change.

There will be collections of images with the same name plus a subscript (eg: TG-img-01.jpg).
Idea is to increment the subscript.

Not used JavaScript for 15 years, so looking for examples of how it can be done.

cheers.

  • javascript
  • string
  • image
  • onclick
Share Improve this question edited Nov 2, 2017 at 12:19 ShahiM 3,2681 gold badge35 silver badges62 bronze badges asked Nov 2, 2017 at 3:30 ProPokerUKProPokerUK 211 gold badge1 silver badge6 bronze badges 2
  • What have you tried? Post some code... Even if it's bad... It's easy to get answers here, but it's impossible to help you as your post is stated – wahwahwah Commented Nov 2, 2017 at 4:47
  • improved formatting and grammar – ShahiM Commented Nov 2, 2017 at 12:19
Add a ment  | 

3 Answers 3

Reset to default 3

Given the tag is javascript and not jQuery I would favour a solution that meets that requirement. In that case:

let counter = 0; // declared in global scope
document.querySelector('button').addEventListener('click', function() {
    	counter++; // increment this instead of rand int so it's 0,1,2 etc
    	buildimg = `TG-img-${counter}.jpg`;
    	document.querySelector('#imageID').setAttribute('src', buildimg);
      document.querySelector('div').innerHTML = buildimg;
    });
<button>Click me</button>
<img id="imageID" src=""/>
<div></div>

Try this below sample code.

<script>
 function pictureChange()
  {
   document.getElementById("theImage").src="img02.png";
  }
</script>

<body>
 <img id="theImage" src="img01.png">
 <p><input type="button" id="theButton" value="click me!" 
    onclick="pictureChange()"></p>
</body>

i just giving random number for your image increment. so this is just changing img source whenever you click button randomly generated number with your image name like TG-img-01.jpg if you dont understand this let me know glad to help you

$('button').click(function() {
  randint = Math.floor(Math.random() * 10) + 1;
  buildimg = 'TG-img-' + randint + '.jpg' 
  $('div > span').text('TG-img-' + randint);
  $('div > img').attr('src', buildimg);
  console.log(buildimg);
});
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span>imagine its like picture with TG-img-01.jpg</span>
  <img src='https://www.askideas./wp-content/uploads/2017/06/Free-Online-Photos1.jpg'>
</div>
<button>
change
</button>

本文标签： javascriptChanging image src on button clickStack Overflow

版权声明：本文标题：javascript - Changing image src on button click - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1743996270a2515632.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。