如何在同一元素中调用两次onclick

Question

我正在尝试使它，当您单击此td时，changeImage（）函数就位。问题是，当您再次单击相同的 td 标签时，我不知道如何将其设置为默认值 - 将其恢复为原始状态。

<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 ? '?' : '';
}