用按鈕觸發的Javascript圖像切換/切換器：如何獲取按鈕文本以進行更改

Question

因此，我一直在使用圖像切換器來切換圖像。 我正在做的是顯示相同大小的2張圖像，並顯示一個干凈的標簽版本。 簡單吧？ 這是我到目前為止的內容：

<button id="button-switch"> Hide/Show Redlines</button><script>(function() 
{'use strict';function init(){var el=document.getElementById('deconstructed');
document.getElementById('button-switch').onclick=function(){el.id=='deconstructed'?(el.id='t-b',el.

    // PLACE CLEAN IMAGE HERE //////////////
    src='_images/clean_image.png',el.alt='my t-b'):(el.id='deconstructed',el.

    // PLACE *LABELED* IMAGE HERE //////////////
    src='_images/labeled_image.png',el.alt='my deconstructed');}}window.addEventListener('load',init,false);})();</script>

    <!-- PLACE *LABELED* ONE MORE TIME HERE    
                                                            --> <div><img id="deconstructed" 
    src="_images/labeled_image.png" 
                                                                    alt="my deconstructed"></div>

在此代碼中，按鈕上的文本相同。 我絕不擅長Javascript，我很驚訝我能夠得到這一系列的東西來合作。 有指針嗎？

Answer 1

嗨，首先請編寫簡潔的代碼，以便每個人都能理解。

<input type='button'
       id="button-switch"
       value='Hide/Show Redlines' / >

<script>(function () {
    'use strict';
    function init() {

        var el = document.getElementById('deconstructed');
        var button = document.getElementById('button-switch');
        button.onclick = function () {
            el.id == 'deconstructed' ? (el.id = 't-b', el.src = '_images/clean_image.png', el.alt = 'my t-b',
                        button.value = 't-b'
                )


                : (el.id = 'deconstructed', el.src = '_images/labeled_image.png', el.alt = 'my deconstructed',
                    button.value = ' Hide/Show Redlines');
        }
    }

    window.addEventListener('load', init, false);
})();
</script>

< !--PLACE * LABELED * ONE   MORE   TIME   HERE    -- >

< div > < img id = "deconstructed" src = "_images/labeled_image.png" alt = "my deconstructed" > < / div >

希望這可以幫助...