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 > 

は、このことができます願ってい...