背景をクリック可能にするにはどうすればいいですか？

Question

私は2枚の写真とポイントカウンターを含むウェブページを作ろうとしていました。ページがロードされると、ピクチャ1が選択され、ピクチャ2は選択解除される。 pic1をクリックすると、何も起こりませんが、pic2をクリックすると選択され、pic1はdesselectedになります。 pic2をクリックすると、何も起こりませんが、pic1をクリックすると選択され、pic2がdesselectedなどになります。背景をクリックすると、pic1が選択されている場合はpic2が選択されている場合は1ポイント、 5点を追加します。また、選択した写真の周りに黄色の四角形を描く必要があります。バックグラウンドだけでポイントをつけることができない限り、すべてが機能しています。私は次のコードを試してみましたが、ポイント・カウンター全体が機能しなくなりました。

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

また、私はjqueryのを使用できないことを指摘したいと思います。

Answer 1

ターゲットがonmousedownの場合、ターゲット（クリックされた要素）がIMGであるかどうかを確認し、そうでない場合はポイントを追加できます。

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