如何使背景可点击？

Question

我一直试图制作一个包含两张图片和一个点计数器的网页。当页面加载时，选择图片1并取消选择图片2。如果你点击pic1，没有任何反应，但如果你点击pic2，它会被选中，pic1会被取消选择。然后，如果你点击pic2，没有任何反应，但如果你点击pic1，它会被选中，pic2被取消选择等。当你点击背景时，如果选择了pic1，它会增加1点，如果选择了pic2，它增加了5分。它还应该在选定的图片周围绘制一个黄色方块。一切都在运作，除了我不能只让背景给出分数。我尝试了以下代码，但整点计数器停止工作。

＆＃13;

＆＃13;

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;

＆＃13;

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

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

＆＃13;

<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();" />

＆＃13;

＆＃13;

＆＃13;

我还想指出我不能使用jquery。

Answer 1

您可以在onmousedown时获取目标，检查目标（被点击的元素）是否为IMG，如果不是，则添加点数。

＆＃13;

＆＃13;

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;

＆＃13;

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

＆＃13;

<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();" />

＆＃13;

＆＃13;

＆＃13;