javascript - 单击某个按钮时我需要更改文本

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