Question

我试图创建一个页面，单击该按钮后div元素的背景图像就会改变。

colors.xml

    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";
         }}

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

有人知道如何解决吗？

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

Answer 2

您可以尝试以下操作：

access-control-allow-origin:*

Array.from(document.querySelectorAll('input[type="button"]')).forEach(function(btn) {
  btn.addEventListener("click", photo);
})

function photo(e) {
  var id = e.target.getAttribute("id"),
    url = "none";
  switch (id) {
    case "one":
      url = "url('1.png')";
      break;
    case "two":
      url = "url('2.png')";
      break;
    case "three":
      url = "url('3.png')";
      break;
    case "four":
      url = "url('4.png')";
      break;
  }
  document.getElementById("photodiv").style.backgroundImage = url;
}

Answer 3

function photo(e)

{

var photograf= document.getElementById("photodiv");
if(sanitize(e.target.value))
photograf.style.backgroundImage= `url('${e.target.value}.png')`;
}

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">`

Answer 4

问题是您正在测试x.click，y.click等，这实际上并不是在测试单击哪个按钮，而是在测试每个元素是否具有{{1 }}方法，它们都是这样做的，但是由于您测试的第一个方法是click，并且该测试返回x.click，因此该方法一直运行。

可以根本不需要true来简化代码。而且，添加更多选择所需要做的就是添加另一个按钮，然后将新的图像路径添加到数组中。

请参阅内嵌下面的评论：

if/then

// Instead of setting up 4 separate event handlers that all point to the 
// same callback function, we can use event delegation where we handle the
// event on an ancestor object of all the elements we care about
document.querySelector(".buttonContainer").addEventListener("click", photo);

// Store all the images in an array
var backgrounds = [
"https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/220px-SNice.svg.png",
"https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Mr._Smiley_Face.svg/2000px-Mr._Smiley_Face.svg.png", 
"https://www.qualitylogoproducts.com/stress-balls/smileyface-squeezie-superextralarge-480745.jpg",
"https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/3647668/1160/1160/m1/fpnw/wm1/10837-royalty-free-rf-clipart-illustration-black-and-white-smiley-face-cartoon-character-vector-illustration-isolated-on-white-background-.jpg?1511798933&s=2e423029fc4d833fde26d36d8a064124"
];

// Get a reference to the output element
var picHolder = document.getElementById("photodiv");

// All event handling functions are automatically passed an argument
// that is a reference to the event object itself
function photo(event){
   // Just set the background image based on the index of the button
   // that got clicked within its parent and the corresponding index
   // of the image in the array
   
   // Get all the <input> elements
   var buttons = document.querySelectorAll(".buttonContainer > input");
   
   // Convert that node list into an array and get the index of the 
   // one that got clicked (event.target is the one that got clicked)
   var index = (Array.prototype.slice.call(buttons)).indexOf(event.target);

   // Set the background to the right image from the array
   picHolder.style.backgroundImage = "url(" + backgrounds[index] + ")";
}

#photodiv { width:100px; height:100px; border:1px solid grey; background-size:cover;  }

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

4 个答案: