html 使用JavaScript一键更改文本和图片

ggazkfy8 于 2023-08-01 发布在 Java

关注(0)|答案(2)|浏览(142)

因此，我创建了一个非常基本的练习页面，点击每个按钮都会弹出一张该国的图片。图片下面是一些文字。
我的问题是，你如何让图片下面的文字也随着每个按钮而变化？例如，当你按下不同的按钮时，从“这是一张西班牙的照片”变成“我妈妈喜欢烹饪”等等。
我在某个地方读到你可以有多个onclick事件;但是我对JavaScript非常陌生，还没有弄清楚如何使用多个onclick事件。
我的HTML与脚本JavaScript如下：

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

字符串
我试过各种网络教程，但似乎都不适合

Html

来源：https://stackoverflow.com/questions/76734301/changing-text-and-picture-with-one-button-using-javascript

2条答案

按热度按时间

iugsix8n1#

你可以在函数中插入国家名称作为第二个参数，例如：

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

字符串
并在函数中使用它：

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

型

赞(0）回复(0）举报 2023-08-01

dced5bon2#

建议是。

使用结构良好且语义有意义的HTML标记
在HTMLElement的dataset property上使用data-* global attributes及其对应的属性
使用事件委托...
...与bind协作，将必要的数据发送到单个事件处理程序实现。

优点是……

一个更好的标记，提高代码重用性，可维护性，甚至用户体验。
标记和代码的完全分离。
...以及明确规定的提供必要数据的地点。

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>

赞(0）回复(0）举报 2023-08-01

我来回答

html 使用JavaScript一键更改文本和图片

2条答案

相关问题

热门标签

最新问答