1

When I click a button, with the onClick function, I replace an image with another one. The code is this

<a class="blue_button" onClick="javascript:loading.style.display='block';zip.style.visibility='hidden';"
href="javascript:getsupport('zip')" id="download">
<img id="zip" src="img/zip.png">
<img id="loading" src="img/loading.gif">
</a>

in the css I have this:

    .blue_button{
    display:block;
    height:30px;
    margin-right:20px;
    float:left;
    width:110px;
    color:#FFF;
    font-size:12px;
        border-radius:4px;
        padding:0 23px 0 20px;
    }

        .blue_button img{
            position:relative;


top:5px;
        margin-right:7px;
    }

    .blue_button img#loading{
        display:none;
        float:left;
        top:-17px;
    }

it works in every browsers, exept IE9. If I active the Compatibility mode it works, but I need to maintain the standard mode.

== SOLVED == using unobtrusive js. Thanks to all

window.onload = loading;
function loading()
{
    document.getElementById('download').onclick = function()
    {
        document.getElementById('zip').style.visibility = 'hidden';
        document.getElementById('loading').style.display = 'block';
    }
}
4

3 に答える 3

1

あなたはloadingと呼ばれるオブジェクトを使用しています。ただし、DOMIDは存在しません。したがって、最初にdocument.getElementById（ "loading"）（またはquerySelector）を使用してページから取得する必要があります。

コードを次のように変更してみてください

onClick="document.getElementById("loading").style.display='block';onClick="document.getElementById("zip").style.visibility='hidden';"
于 2012-10-09T13:38:02.387 に答える
1

私は問題を見つけたと思います：

onClick="javascript:loading.style.display='block';zip.style.visibility='hidden';"

onclick イベントはjavascript:

残りの JavaScript を含めていただければ、テストできるかもしれません。

また、onclick と href の両方があります。そのうちの 1 つだけを使用することもできます。詳しくaddEventListener()はこちらをご覧ください。

別の注意点として、CSS クラスの命名はかなり悪いです。青や赤などと呼びたくありません。それは変えることができました。それらをセマンティックに保ちたい。

読む:セマンティック クラス名とは?

于 2012-10-09T13:24:12.107 に答える
0

@Allanが言ったように、あまりにも多くのことが起こっており、副作用とスコープのオーバーロードに依存しています

これは私がそれを行う方法です：

プレーン JS

window.onload=function() {
  document.getElementById("download").onclick=function() {
    document.getElementById("loading").style.display='block';
   // use .display='none' to remove, 
   // visibility='hidden' to hide but leave the space
    document.getElementById("zip").style.display='none'; 
    getsupport('zip');
    return false;
  }
}

jQuery:

$(function() {
  $("#download").on("click",function() {
    $("#loading").show();
    $("#zip").hide(); 
    getsupport('zip');
    return false;
  });
});

どちらの場合も HTML:

<a class="blue_button" href="#" id="download"><img id="zip" src="img/zip.png"><img id="loading" src="img/loading.gif"></a>
于 2012-10-09T13:55:06.847 に答える