How to make the background be clickable?

Question

I've been trying to make a webpage that contains two pictures and a point counter. When the page loads, picture 1 is selected and picture 2 is desselected. If you click on pic1, nothing happens, but if you click on pic2, it gets selected and pic1 gets desselected. Then, if you click on pic2, nothing happens, but if you click on pic1, it gets selected and pic2 gets desselected, etc. When you click on the background, if pic1 is selected, it adds 1 point, if pic2 is selected, it adds 5 points. It should also draw a yellow square around the selected pic. Everything is working, except I can't make only the background give points. I tried the following code, but the whole point counter stopped working.

function addPoint(number) {
  points = points + number;
  document.getElementById("points").innerHTML = points;
};

function pointsAmmount() {
  chkBox1 = document.getElementById("picture1").checked;
  addPoint(chkBox1 ? 1 : 5);
};

function checkPicture1() {
  document.getElementById("picture1").checked = true;
}

function uncheckPicture1() {
  document.getElementById("picture1").checked = false;
}

function addBorder1() {
  document.getElementById("pic1").style.border = "5px solid yellow";
}

function addBorder2() {
  document.getElementById("pic2").style.border = "5px solid yellow";
}

function removeBorder1() {
  document.getElementById("pic1").style.border = "5px solid white";
}

function removeBorder2() {
  document.getElementById("pic2").style.border = "5px solid white";
}

function onPageload() {
  checkPicture1();
  addBorder1();
  removeBorder2();
}
window.onload = onPageload;
background.onmousedown = pointsAmmount;
var points = 0;

input[type=checkbox] {
  display: none;
}

input[type=button] {
  display: none;
}

<p align="center">Points: <span id="points">0</span></p>
<p align="center">
  <label for="picture1">
    <img src="eslcc_logo.png" alt="eslcc logo" id="pic1"/>
  </label>
</p>
<input id="picture1" type="checkbox" onchange="checkPicture1()" onclick=" 
    addBorder1();
    removeBorder2();" />
<p align="center">
  <label for="picture2">
    <img src="imac.jpg" alt="iMac" id="pic2"/>
  </label>
</p>
<input id="picture2" type="button" onclick="
    uncheckPicture1(); 
    addBorder2();
    removeBorder1();" />

I would also like to point out that I can't use jquery.

Answer 1

You can get the target when onmousedown, check if the target (the element that got clicked) is an IMG and add the points if it's not.

function addPoint(number){
points = points + number;
document.getElementById("points").innerHTML = points;
};
function pointsAmmount(){
chkBox1 = document.getElementById("picture1").checked;  
addPoint(chkBox1 ? 1 : 5);
};
function checkPicture1(){
document.getElementById("picture1").checked = true;
}
function uncheckPicture1(){
document.getElementById("picture1").checked = false;
}
function addBorder1(){
document.getElementById("pic1").style.border = "5px solid yellow";
}
function addBorder2(){
document.getElementById("pic2").style.border = "5px solid yellow";
}
function removeBorder1(){
document.getElementById("pic1").style.border = "5px solid white";
}
function removeBorder2(){
document.getElementById("pic2").style.border = "5px solid white";
}
function onPageload(){
checkPicture1();
addBorder1();
removeBorder2();
}
window.onload = onPageload;
document.getElementsByTagName('html')[0].onmousedown = function(e) { 
  if(e.target.tagName!="IMG")   pointsAmmount(); 
}
var points = 0;

input[type=checkbox]{
  display:none;
}
input[type=button]{
  display:none;
}
html {
    height: 100%;
}

<p align="center">Points: <span id="points">0</span></p>
<p align="center"><label for="picture1"><img src="eslcc_logo.png" alt="eslcc logo" id="pic1"/></label></p>
<input id="picture1" type="checkbox" onchange="checkPicture1()" onclick="addBorder1(); removeBorder2();"/>
<p align="center"><label for="picture2"><img src="imac.jpg" alt="iMac" id="pic2"/></label></p>
<input id="picture2" type="button" onclick="uncheckPicture1(); addBorder2(); removeBorder1();" />