Question

我要做的是通过单击按钮更改我放置在HTML中的某些引导选项卡中的图像源。不知道我错在哪里。当我运行代码时，什么都不会发生。也没有控制台错误。该脚本在我的HTML顶部外部引用。为了学习，我宁愿留在Javascript领域。

HTML

<div id="vehicleModelFrame">
        <button id="modelFrameButton1" type="button" onclick="showTrim1()"></button>
        <button id="modelFrameButton2" type="button" onclick="showTrim2()"></button>
        <button id="modelFrameButton3" type="button" onclick="showTrim3()"></button>
    </div>
    <div id="selectTrimTitle">
        <h3>
            Vehicle Trim
        </h3>
    </div>
    <div id="vehicleTrimFrame">
        <div class="trimSelector">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#home">Trim 1</a></li>
                <li><a data-toggle="tab" href="#menu1">Trim 2</a></li>
                <li><a data-toggle="tab" href="#menu2">Trim 3</a></li>
                <li><a data-toggle="tab" href="#menu3">Trim 4</a></li>
            </ul>
            <div class="tab-content">
                <div id="home" class="tab-pane active">
                    <img id="carLogo1" src="noimage.png" alt="carLogo">
                </div>
                <div id="menu1" class="tab-pane">
                    <img id="carLogo2" src="noimage.png" alt="carLogo">
                </div>
                <div id="menu2" class="tab-pane">
                    <img id="carLogo3" src="noimage.png" alt="carLogo">
                </div>
                <div id="menu3" class="tab-pane">
                    <img id="carLogo4" src="noimage.png" alt="carLogo">
                </div>
            </div>
        </div>
    </div>

JAVASCRIPT

function showTrim1() {

var imgback = document.getElementById("modelFrameButton1");
var imgsrc = document.getElementById("carLogo1");

    if (imgback.style.backgroundImage == "url('JeepWrangler.png')") {
        imgsrc.src = "jeep_wrangler.png";

    }

}

Answer 1

想想要实现目标会发生什么：

单击按钮时必须调用您的函数。
调用的函数必须找到您感兴趣的img DOM元素。
该函数必须更改src的{{1}}属性。

以下是你如何做到这一点：

img

document.addEventListener('DOMContentLoaded', function() {
  var newSrc = 'http://lorempixel.com/400/200/sports/1';
  var button = document.querySelector('button');
  var img = document.querySelector('img');
  
  button.addEventListener('click', function() {
    img.src = newSrc;
  });
});

至于你的代码出了什么问题，很难说。 <img src='http://lorempixel.com/400/200 '> <button>Change src</button>会被调用吗？你的showTrim()工作了吗？你的document.getElementById声明会被击中吗？等

注意：

在提问时尽量坚持these guidelines。
正确缩进和格式化代码非常重要。它使理解和调试变得更加容易。
if被认为是不好的做法。 addEventListener是要走的路。

Answer 2

我弄清楚我的问题是什么。我在if语句中使用的比较运算符不正确。我没有使用=而是使用==，这在我的案例中显然是不正确的。新代码工作正常。

JAVASCRIPT

document.getElementById("modelFrameButton1").addEventListener("click", function showTrim1(){
var carImg = document.getElementById("carLogo1");

if (document.getElementById("modelFrameButton1").style.backgroundImage = "JeepWrangler.png") {
    carImg.src = "Jeep_Wrangler.png";
}else{
    alert(document.getElementById("modelFrameButton1").style.backgroundImage);

}

}）;

我最终也用事件监听器替换了我的“onclicks”。谢谢大家的帮助！

如果声明使用Javascript更改图像源

HTML

JAVASCRIPT

2 个答案:

JAVASCRIPT