Im trying to make a page where the background image of the div element changes once I click a button.
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">The problem is once I try to click on the buttons the only photo that appears is "1.png" no matter what button I click.
Does anyone have an idea how this could be solved?
The problem is that you are testing x.click, y.click, etc. which is not actually testing to see which button got clicked, but instead is testing to see if each element has a click method, which they all do, but because the first one you test is x.click and that test returns true, that's the one that runs all the time.
The code can be simplified quite a bit with no if/then needed at all. And, all you'd have to do to add more choices is just add another button and add the new image path into the array.
See the comments inline below:
// 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; }<!-- id's are not needed but wrapping all the buttons in a common ancestor will help -->
<div class="buttonContainer">
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="4">
</div>
<div id="photodiv"></div>