If語句使用Java更改圖像源

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

考慮一下要實現您的目標將要發生的事情：

1. 單擊該按鈕時必須調用您的函數。
2. 調用的函數必須找到您感興趣的img DOM元素。
3. 該功能必須更改該img的src屬性。

這是您的操作方式：

 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工作嗎？ 您的if語句會受到打擊嗎？ 等等。

筆記：

• 提出問題時，請嘗試遵守這些准則 。
• 正確縮進代碼並格式化格式非常重要。 它使理解和調試變得更加容易。
• onclick被認為是不好的做法。 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”。 謝謝大家的幫助！