如何在同一元素中調用兩次onclick

Question

我試圖做到這一點，所以當你點擊這個td時，changeImage（）函數就位。問題是，我不知道如何將其設置爲默認值，當您再次單擊相同的td標籤時 - 將其恢復爲orignal。

<table id="table"> 
    <tr> 
     <td id="s1" class="kvadratek" onclick="changeImage();">?</td> 
     <td id="s2" class="kvadratek slike">?</td> 
     <td id="s3" class="kvadratek slike">?</td> 
     <td id="s4" class="kvadratek slike">?</td> 
    </tr> 

<script type="text/javascript"> 
    function changeImage(){ 
     document.getElementById("s1").style.backgroundImage = "url('css/image1.jpg')"; 
     document.getElementById("s1").style.backgroundSize = "contain"; 
     document.getElementById("s1").innerHTML = ""; 

    } 

Answer 1

你只需要設置一個觸發

function changeImage(){ 
    var tag = event.target; //or document.getElementById("s1"); 
    if(tag.style.backgroundImage !== "url('css/image1.jpg')") { 
     tag.style.backgroundImage = "url('css/image1.jpg')"; 
     tag.style.backgroundSize = "contain"; 
     tag.innerHTML = ""; 
    } 
    else { 
    //set original settings here. 
    } 

} 

Answer 2

function changeImage(){ 
    changed = (bool) document.getElementById("s1").innerHTML; 
    document.getElementById("s1").style.backgroundImage = changed ? '' : "url('css/image1.jpg')"; 
    document.getElementById("s1").style.backgroundSize = changed ? '' :"contain"; 
    document.getElementById("s1").innerHTML = changed ? '?' : ''; 
}