Changing text and picture with one button using Javascript

Question

So I've created a very basic practice page, where clicking each button will bring up a picture of the country. Below the picture is some text.

My question is, how do you go about making the text below the picture also change with each button? For example, changing from "This is a picture of Spain" to "My mum likes cooking" etc when you hit the different buttons.

I read somewhere you can have multiple onclick events with ; between them, but I'm very new to Javascript and haven't been able to work out how to use multiple onclick events.

My HTML with script Javascript is below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Birds</title>
    <link rel="stylesheet" type="text/css" href="styling.css">

</head>

<body>
    <main>
   
        <h1>Places</h1>
        <h2>Subheading Goes Here</h2>
        <img id="bannerImage" src="https://www.planetware.com/wpimages/2020/03/portugal-in-pictures-beautiful-places-to-photograph-lisbon.jpg" /> <br> <br />
        <p id ="text">This is a picture of Northern Ireland</p>
        <nav>
            <button class="mainbuttons" onclick="changeImage('https://www.planetware.com/wpimages/2020/03/portugal-in-pictures-beautiful-places-to-photograph-lisbon.jpg')">Northern Ireland</button>
            <button class="mainbuttons" onclick="changeImage('https://theworldpursuit.com/wp-content/uploads/2021/01/things-to-do-in-northern-ireland.jpg')">Ireland</button>
            <button class="mainbuttons" onclick="changeImage('https://d32uwaumftsuh7.cloudfront.net/Pictures/768x432/7/2/0/22720_gameofthronesthedarkhedges_thekingsroad_master_529527_crop.jpg')">Scotland</button>
            <button class="mainbuttons" onclick="changeImage('https://media.cntraveller.com/photos/611bf776db797d0116fd53ab/master/w_1600,c_limit/causeway-coast-in-antrim-northern-ireland-gettyimages-1193546847.jpg')">Wales</button>
            <button class="mainbuttons" onclick="changeImage('https://onhisowntrip.com/wp-content/uploads/2020/08/Great-British-Chefs-1.jpg')">Spain</button>         
        </nav>

        <button id="themechanger" onclick="toggleTheme()">Toggle Theme</button>

<script>
function changeImage(fileName) {
let img = document.querySelector('#bannerImage');
img.setAttribute('src', fileName);
}

function toggleTheme(){
window.theme = typeof(window.theme)==='string' ? window.theme : 'root';
var switchToTheme = window.theme === 'root' ? 'dark' : 'root';
window.theme = switchToTheme;
document.querySelector('html').setAttribute('data-theme',switchToTheme);
}
</script>

</body>


    </main>
     
</body>
</div>
</html>

I've tried various internet tutorials, but nothing seems to fit

Regarding the so far provided solutions, are there any questions left? — Peter Seliger, Aug 03 '23 at 12:17

score 1 · Answer 1 · answered Jul 24 '23 at 21:17

you can insert country name as second parameter in your function for example:

<button class="mainbuttons" onclick="changeImage('https://www.planetware.com/wpimages/2020/03/portugal-in-pictures-beautiful-places-to-photograph-lisbon.jpg','Northern Ireland')">Northern Ireland</button>

and use it in your function:

function changeImage(fileName,title) {
    let img = document.querySelector('#bannerImage');
    img.setAttribute('src', fileName);

    let caption = document.getElementById('text');
    caption.innerHTML = "This is a picture of "+ title;
}

This is a straightforward, simple and robust solution which most probably fits best the OP's need and current skill. @Kotor2 ... thus, the OP should consider voting on and accepting this answer. — Peter Seliger, Jul 26 '23 at 07:51

Peter Seliger · Answer 2 · 2023-07-21T16:35:48.533

The suggestion is to ..

use a well structured and semantically meaningful HTML markup
use data-* global attributes and their counterpart properties on an HTMLElement's dataset property
make use of event-delegation ...
... in collaboration with binding necessary data to a single event-handler implementation.

The advantages are ...

a better markup which improves code-reuse, maintainability and even the user experience.
a total separation of markup and code ...
... and a well defined place of where to provide the necessary data to.

function handleBannerChangeFromBoundData({ target }) {
  // - always assure the intended button-target especially
  //   in case a button element does feature child elements.
  target = target.closest('button');

  if (target) {
    const { bannerSrc = "", bannerText = "" } = target.dataset;
    const { elmImage, elmCaption } = this;

    elmImage.src = bannerSrc;
    elmCaption.textContent = bannerText;
  }  
}

function initializeDynamicBanner(rootNode) {
  const elmImage = rootNode.querySelector('figure > img');
  const elmCaption = rootNode.querySelector('figure > figcaption');
  const elmNavigation = rootNode.querySelector('nav');

  elmNavigation.addEventListener(
    'click',
    handleBannerChangeFromBoundData.bind({
      elmImage,
      elmCaption,
    }),
  );
}

initializeDynamicBanner(
  document.querySelector('#dynamic-banner')
);

body { margin: 0; }
h1, h2 { margin: 0; font-size: .9em; }
h2, figcaption { font-size: .8em; }
figure { margin: 3px 0 7px 0; }
figure img { max-height: 150px; width: auto; }

<main>
  <h1>Places</h1>

  <h2>Subheading Goes Here</h2>

  <article id="dynamic-banner">
    <figure>
      <img
        src="https://www.planetware.com/wpimages/2020/03/portugal-in-pictures-beautiful-places-to-photograph-lisbon.jpg"
        alt="Somewhere in Lisboa"
      >
      <figcaption>Somewhere in Lisboa</figcaption>
    </figure>

    <nav>
      <button
        data-banner-src="https://www.planetware.com/wpimages/2020/03/portugal-in-pictures-beautiful-places-to-photograph-lisbon.jpg"
        data-banner-text="Somewhere in Lisboa"
      >Lisboa</button>
      <button
        data-banner-src="https://theworldpursuit.com/wp-content/uploads/2021/01/things-to-do-in-northern-ireland.jpg"
        data-banner-text="Things to do in northern Ireland"
      >Northern Ireland</button>
      <button
        data-banner-src="https://d32uwaumftsuh7.cloudfront.net/Pictures/768x432/7/2/0/22720_gameofthronesthedarkhedges_thekingsroad_master_529527_crop.jpg"
        data-banner-text="The king's road"
      >Scotland</button>
      <button
        data-banner-src="https://media.cntraveller.com/photos/611bf776db797d0116fd53ab/master/w_1600,c_limit/causeway-coast-in-antrim-northern-ireland-gettyimages-1193546847.jpg"
        data-banner-text="Not Wales stupid, but causeway coast in Antrim Northern Ireland"
      >Wales</button>
      <button
        data-banner-src="https://onhisowntrip.com/wp-content/uploads/2020/08/Great-British-Chefs-1.jpg"
        data-banner-text="Not Spain, but great British chefs"
      >Spain</button>
    </nav>

  </article>
</main>

Note that `
` isn't semantically appropriate here. Pressing one of those buttons doesn't navigate the user anywhere. Nor are the addition of `
` and `
` elements in this case — Sean, Jul 30 '23 at 01:39

Changing text and picture with one button using Javascript

2 Answers2