Javascript 我需要在单击某个按钮时更改文本

对于我的项目，我们需要能够定制产品。我已经做了一些改变汽车颜色的按钮（通过切换图像源）。但我也需要改变文本“颜色：午夜黑色->蓝色”在按下同一个按钮，但我似乎无法让它工作。希望有人能帮忙

函数changeImage0（）{
让img=document.getElementById（“customColor”）；
img.src=“../resources/customize/rsz_black.jpg”；
返回false；
}
函数changeImage1（）{
让img=document.getElementById（“customColor”）；
img.src=“../resources/customize/rsz_blue.jpg”；
返回false；
}
函数changeImage2（）{
让img=document.getElementById（“customColor”）；
img.src=“../resources/customize/rsz_red.jpg”；
返回false；
}
函数changeImage3（）{
让img=document.getElementById（“customColor”）；
img.src=“../resources/customize/rsz_white.jpg”；
返回false；
}
函数changeImage4（）{
让img=document.getElementById（“customColor”）；
img.src=“../resources/customize/rsz silver.jpg”；
返回false；
}

杰克莱尔私人酒店

自动：梅赛德斯AMG GT 4午夜黑色

发布日期：2019年第二季度


Kleur:Midnight Black
午夜黑
天蓝色
红色
白色
银币

您可以将

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

午夜黑 函数changeImage0（事件）{ 让img=document.getElementById（“customColor”）； img.src=“../resources/customize/rsz_black.jpg”； document.getElementById（“ZwartKleur”）.querySelector（“b”）.innerText=event.target.innerText； 返回false； }

---

重新访问并清理您的代码

标记

描述性内容可以分组为

表

，或者，如下面的示例所示，可以分组为描述列表（

）

---

您只需完成一个功能，代码如下：

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

功能更改图像（el）{
让img=document.getElementById（“customColor”）；
//log（el.getAttribute（'data-alt'）；
img.src=el.getAttribute（'data-img'）；
img.alt=el.getAttribute（'data-alt'）；
返回false；
}

杰克莱尔私人酒店

自动：梅赛德斯AMG GT 4午夜黑色

发布日期：2019年第二季度


Kleur:Midnight Black
午夜黑
天蓝色
红色
白色
银币

谢谢您的回复！正如您可能已经注意到的那样，我对javascript并没有真正的经验。我需要在脚本中使用什么额外的代码来将文本从“午夜黑”更改为“天蓝色”？您帮了我很大的忙！我把所有的答案代码和我自己的代码混在一起，结果很不错！你帮了大忙！我把所有的答案代码和我自己的代码混在一起，结果很不错！你帮了大忙！我把所有的答案代码和我自己的代码混在一起，结果很不错！

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