用按钮触发的 Javascript 图像切换/切换器：如何更改按钮文本答案

【问题标题】：Javascript Image toggle/switcher triggered with a button: How can I get the button text to change用按钮触发的 Javascript 图像切换/切换器：如何更改按钮文本
【发布时间】：2017-01-06 13:38:53
【问题描述】：

所以我一直在使用图像切换器来切换图像。我正在做的是拥有 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 方面绝不是体面的，我很惊讶我能够让这一系列的事情合作。有什么指点吗？

【问题讨论】：

标签： javascript jquery image button

【解决方案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 >

希望这会有所帮助...

【讨论】：