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

ProgramBox

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

Post author:admin
Запись опубликована:17 мая, 2023
Post category:Вопросы по программированию

#javascript #css #html

#javascript #css #HTML

Вопрос:

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

 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>

Ответ №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;
}

1. Спасибо за ответ! Я не очень разбираюсь в javascript, как вы, возможно, заметили. Какой дополнительный код мне нужно было бы использовать в скрипте, чтобы изменить текст с «midnight black» на «sky blue»

Ответ №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>

Спасибо

Ответ №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>