javascript - 通过单击特定按钮更改 div 背景图像

Question

我试图创建一个页面，一旦单击按钮，div 元素的背景图像就会发生变化。

    document.getElementById("one").addEventListener("click", photo);
    document.getElementById("two").addEventListener("click", photo);
    document.getElementById("three").addEventListener("click", photo);
    document.getElementById("four").addEventListener("click", photo);


  
    function photo()

    {


    var photograf= document.getElementById("photodiv");
    var x= document.getElementById("one");
    var y= document.getElementById("two");
    var z= document.getElementById("three");
    var t= document.getElementById("four");

    if (x.click) {photograf.style.backgroundImage= "url('1.png')";}
    else if (y.click) {photograf.style.backgroundImage= "url('2.png')";}
    else if (z.click) {photograf.style.backgroundImage= "url('3.png')";}
    else if (t.click) {photograf.style.backgroundImage= "url('4.png')";}
    else {photograf.style.backgroundImage= "none";
         }}

    div id="photodiv">

    </div>

    <input type="button" value="1" id="one">
    <input type="button" value="2" id="two">
    <input type="button" value="3" id="three">
    <input type="button" value="4" id="four">

问题是，一旦我尝试单击按钮，无论我单击什么按钮，出现的唯一照片都是“1.png”。

有谁知道如何解决这个问题？

标签： javascriptclickbackground-image

Answer 1

你可能应该改变你做这件事的方式：

我会建议这样的事情：

        document.getElementById("one").addEventListener("click", photo(1));
        document.getElementById("two").addEventListener("click", photo(2));
        document.getElementById("three").addEventListener("click", photo(3));
        document.getElementById("four").addEventListener("click", photo(4));



        function photo(x) {

        var photograf= document.getElementById("photodiv");

        switch (x) {
           case 1:
               photograf.style.backgroundImage= "url('1.png')";
               break;
           case 2:
               //Statements executed when the
               //result of expression matches value2
               break;
           default:
               //Statements executed when none of
               //the values match the value of the expression
               break;
         }
}

资源 ：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch