javascript - 如何在同一个元素中调用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. 
    }

}