Мне нужно изменить текст при нажатии определенной кнопки

Question

Для моего проекта мы должны иметь возможность настроить продукт.Я уже сделал несколько кнопок, которые меняют цвет автомобиля (переключая источник изображения).Но мне также нужно изменить текст «цвет: полночь черный -> синий» при нажатии той же кнопки, но я не могу заставить его работать.Надеюсь, что кто-нибудь может помочь.

function changeImage0() {
  let img = document.getElementById("customColor");
  img.src = "../resources/customize/rsz_black.jpg";

  return false;
}

function changeImage1() {
  let img = document.getElementById("customColor");
  img.src = "../resources/customize/rsz_blue.jpg";

  return false;
}

function changeImage2() {
  let img = document.getElementById("customColor");
  img.src = "../resources/customize/rsz_red.jpg";
  return false;
}

function changeImage3() {
  let img = document.getElementById("customColor");
  img.src = "../resources/customize/rsz_white.jpg";
  return false;
}

function changeImage4() {
  let img = document.getElementById("customColor");
  img.src = "../resources/customize/rsz-silver.jpg";
  return false;
}

<main>
  <h1>Personaliseer je kleur</h1>
  <figure class="imageCustom">
    <img alt="zwarte mercedes amg gt" id="customColor" src="../resources/customize/rsz_black.jpg" />

  </figure>
  <article class="TextCustom">
    <p><br><b>Auto:</b> Mercedes AMG GT 4 Midnight Black
      <br><b>Release:</b> Q2 2019</p>
    <!-- text that needs to change when the a certain button is clicked -->
    <p class="TextKleur" id="ZwartKleur"><br><b>Kleur:</b>Midnight Black</p>
  </article>
  <!-- we stoppen de buttons in een aside , zodat we deze gemakkelijk verticaal aan de linkerkant van het scherm
     kunnen weergeven-->
  <aside>
    <a class=buttonKleur id="BlackGt" onclick="changeImage0();">Midnight Black</a>
    <a class=buttonKleur id="BlueGt" onclick="changeImage1();">Sky blue</a>
    <a class=buttonKleur id="RedGt" onclick="changeImage2();">Red</a>
    <a class=buttonKleur id="WhiteGt" onclick="changeImage3();">White</a>
    <a class=buttonKleur id="SilverGt" onclick="changeImage4();">Silver</a>
  </aside>

Answer 1

Вы можете использовать event.target с innerText и querySelector следующим образом:

<a class=buttonKleur id="BlackGt" onclick="changeImage0(event);">Midnight Black</a>

function changeImage0(event) {
    let img = document.getElementById("customColor");
    img.src = "../resources/customize/rsz_black.jpg";
    document.getElementById("ZwartKleur").querySelector("b").innerText = event.target.innerText;
    return false;
}

Answer 2

Вы можете просто сделать это только одной функцией здесь код здесь:

    function changeImage(el) {
      let img = document.getElementById("customColor");
      
      //console.log(el.getAttribute('data-alt'));
      
      img.src = el.getAttribute('data-img');
      img.alt = el.getAttribute('data-alt');
      
      return false;
    }

    <main>
      <h1>Personaliseer je kleur</h1>
      <figure class="imageCustom">
        <img alt="zwarte mercedes amg gt" id="customColor" src="../resources/customize/rsz_black.jpg" />

      </figure>
      <article class="TextCustom">
        <p><br><b>Auto:</b> Mercedes AMG GT 4 Midnight Black
          <br><b>Release:</b> Q2 2019</p>
        <!-- text that needs to change when the a certain button is clicked -->
        <p class="TextKleur" id="ZwartKleur"><br><b>Kleur:</b>Midnight Black</p>
      </article>
      <!-- we stoppen de buttons in een aside , zodat we deze gemakkelijk verticaal aan de linkerkant van het scherm
         kunnen weergeven-->
      <aside>
        <a class=buttonKleur onclick="changeImage(this);" data-img="your image url" data-alt="Midnight Black">Midnight Black</a>
        <a class=buttonKleur onclick="changeImage(this);" data-img="your image url" data-alt="Sky blue">Sky blue</a>
        <a class=buttonKleur onclick="changeImage(this);" data-img="your image url" data-alt="Red">Red</a>
        <a class=buttonKleur onclick="changeImage(this);" data-img="your image url" data-alt="White">White</a>
        <a class=buttonKleur onclick="changeImage(this);" data-img="your image url" data-alt="Silver">Silver</a>
      </aside>

Спасибо

Answer 3

Ваш код немного пересмотрен и очищен

Разметка

Описательный контент может быть сгруппирован как table или, как в моем примере ниже, как список описания (<dl>)

<main>

    <h1>Personaliseer je kleur</h1>

    <figure class="imageCustom">
        <img alt="zwarte mercedes amg gt" id="customColor" src="../resources/customize/rsz_black.jpg"/>
    </figure>

    <article class="TextCustom">
        <dl>
           <dt>Auto:</dt>
           <dd>Mercedes AMG GT 4 Midnight Black</dd>

           <dt>Release:</dt>
           <dd>Q2 2019</dd>

           <!-- text that needs to change when the a certain button is clicked -->
           <dt>Kleur:</dt>
           <dd id="ZwartKleur">Midnight Black</dd>
        </dl>

    </article>
    <!-- we stoppen de buttonxs in een aside , zodat we deze gemakkelijk verticaal aan de linkerkant van het scherm
         kunnen weergeven-->
    <aside>
        <a class=buttonKleur data-image="../resources/customize/rsz_black.jpg">Midnight Black</a>
        <a class=buttonKleur data-image="../resources/customize/rsz_blue.jpg">Sky blue</a>
        <a class=buttonKleur data-image="../resources/customize/rsz_red.jpg">Red</a>
        <a class=buttonKleur data-image="../resources/customize/rsz_white.jpg">White</a>
        <a class=buttonKleur data-image="../resources/customize/rsz-silver.jpg">Silver</a>
    </aside>

</main>

Все ваши функции можно свести к одной функции, которая читает атрибут data-image по нажатой ссылке и свойство textContent

Js:

<script>
    let img = document.getElementById("customColor");
    let color = document.getElementById("ZwartKleur");
    document.querySelector('aside').addEventListener('click', function(ev) {
        let tgt = ev.target;
        if (tgt.matches('[data-image]')) {
            /* image */
            img.src = tgt.dataset.image;
            /* color */
            color.textContent = tgt.textContent;
            ev.preventDefault();
        }
    });
</script>